Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Opening NbSelect distorts page layout #1443

Closed
1 of 2 tasks
kesdeband opened this issue Apr 29, 2019 · 16 comments
Closed
1 of 2 tasks

Opening NbSelect distorts page layout #1443

kesdeband opened this issue Apr 29, 2019 · 16 comments
Labels
bug module:components
Milestone
4.1.0

Comments

@kesdeband
Copy link

Issue type

I'm submitting a ... (check one with "x")

  • bug report
  • feature request

Issue description

Current behavior:
If you have nb-layout-header on a page and nb-select inside nb-layout-column and if page's height is bigger than your screen and you open the nb-select after scrolling, the nb-layout-header would disappear.
(NOTE:) - the parent component nb-layout has no input properties.

Expected behavior:
nb-layout-header shouldn't move or disappear after scrolling the page and opening the nb-select

Steps to reproduce:
create nb-layout then inside it one nb-layout-header and one nb-layout-column. Then put a div Inside nb-layout-column with a height bigger than the screen, so you can to scroll it then put a nb-select inside this div in a position that you have to scroll in order to get to it, then open then nb-select to see the issue.

Related code:
Please refer to this closed issue - #1158

Angular, Nebular

Angular - 7.3.7
Nebular - 3.5.0
@maihannijat
Copy link
Contributor

The bug made the NbSelect component unusable. The closed referenced issue does not solve the bug.

Looking forward for workaround
Thanks

@bruno-lombardi
Copy link

Yep, this issue is still happening, in the official demo and in my app. NbSelect is breaking the layout. When a nb select is opened with the window scrolled down, the html element style attribute is changed applying negative top css property to it. This pushes the header too, and in my app, the nb-menu element.

@maihannijat
Copy link
Contributor

For now, I fixed it with:

/deep/ nb-layout.with-scroll .scrollable-container {
  height: auto !important;
}

@maihannijat
Copy link
Contributor

negative top margin is added to the html element when select component is clicked. I added the following now to have quick fix:
html {top: 0 !important;}

@Meowzz95
Copy link

Same issue here... @maihannijat 's solution doesn't seem to work for me... Where do you add the html style?

@SnakyBeaky
Copy link

SnakyBeaky commented Jun 11, 2019 •
edited
Loading

Ran into the issue today, fixed with @maihannijat first fix, but using ::ng-deep instead of /deep/:

::ng-deep nb-layout.with-scroll .scrollable-container {
    height: auto !important;
}

Although that may break other scrollings, not a perfect fix.

@maihannijat
Copy link
Contributor

@Meowzz95 I add the following in the index.html:

<head>
      <style>html {top: 0 !important;}</style>
</head>

@kevinjamesbaker
Copy link

Any other solutions for this one that DOESN'T break scrolling??

@nnixaa nnixaa added this to the 4.0.1 milestone Jun 12, 2019
@bruno-lombardi
Copy link

For now, I don't use selects from nebular, just the common bootstrap .custom-select. For my application, it doesn't matter so much, but it would be nice for it to work properply. But, it seems like Nebular had an update, as the look of the selects have changed, maybe this issue was fixed??

@yggg
Copy link
Contributor

yggg commented Jun 12, 2019 •
edited
Loading

The issue with header should be fixed by #1604. Also, a similar issue was fixed in the sidebar by #1607. We're planning to release minor updates with this fixes tomorrow (for both latest 4.0 and LTS 3.6 versions).

Before the release, you could apply change manually to verify fix does work.

To fix header:

  1. Remove all workarounds proposed above.
  2. Add the next lines to the global styles or component containing nb-layout-header.
nb-layout-header.fixed {
  top: 0;
}

To fix sidebar:

  1. Remove all workarounds proposed above.
  2. If you use custom theming add next lines in the component containing nb-sidebar: 
    nb-sidebar ::ng-deep .main-container-fixed {
  top: nb-theme(header-height);
}
    or if case you use prebuilt css add following lines in global styles: 
    nb-sidebar .main-container-fixed {
  top: 4.75rem;
}

Please, let us know here if fixes don't work for you.

@yggg yggg modified the milestones: 4.0.1, 4.1.0 Jun 14, 2019
@yggg yggg mentioned this issue Jun 14, 2019
Closed
1 task
@yggg
Copy link
Contributor

yggg commented Jun 14, 2019

Closing as fixed in Nebular 3.6.1 or 4.1.0. If you still facing this issue, feel free to reopen.

@yggg yggg closed this as completed Jun 14, 2019
@jagabs
Copy link

jagabs commented Feb 13, 2020

@yggg this is when nb-select is in a dialog
Screen Shot 2020-02-13 at 10 45 08 PM

still occurs on "@nebular/theme": "4.6.0"

@aaron-harvey
Copy link

happens in 5.x as well

@jcfrane
Copy link

jcfrane commented Jun 7, 2020

Still happening but on production build only. This is very weird

@kkrishalee
Copy link

still happening in 6.0 as well, not fixed yet

@SeccoMaracuja
Copy link

I have placed an nb-select on my footer. The bug is still happening in 6.2.1. Need help!

video.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug module:components
Projects
None yet
Milestone
4.1.0
Development

No branches or pull requests