I have an HTML table where each row contains a Twitter Bootstrap style drop down list. When I click the button to show the list, the menu is not shown due to the overflow property of the div container. I have placed sample code that shows the issue I'm having at: http://jsfiddle.net/jpaolini/XgYKP/4/.
The goal is to get the drop down menu to appear on top of everything so it can be seen without have to scroll. Any help is greatly appreciated.
I removed the overflow: auto; from .widget-content and removed overflow: hidden from .dataTables_wrapper, and that seems to work.
http://jsfiddle.net/jackwanders/cnnsB/
you can try adding position:absolute in your .btn-group and the dropdown will go out of the table. The btn wont go inside the table anymore though
Related
I am facing issue with ng-select when it is used in scroll able div.
Please find the screen shot -
Issue : The gap is coming between search text box and drop down, downtown should move with search input box.
To reproduce the issue -
https://stackblitz.com/edit/ng-select-uygqu1?file=app%2Fapp.component.ts
click on the first drop down (ng-select). It will open up the available options.
Now scroll by using two finger on laptop mouse key pad / scroll from mouse.
Any help is much appreciated.
Thanks in Advance.
You're appending the drop down to the body, not to the ng-select , so by definition it will calculate the position of the ng-select according to the body, that is it's last received position.
It will not update the position once opened when you scroll (not supported), you need to close the drop down when scrolling happens (not supported by ng-select - issue is currently opened - suggestions also given by support in link ), then open the drop down as required.
Even if you don't close the drop down and somehow it miraculously updates the position when scrolling, the drop down will show even if the ng-select is hidden in the overflow, which will not look nice.
I suggest to close the drop down when scroll is happening. You can't have both absolute positioning and show it outside the table and then hide it when the ng-select is hidden. JQuery perhaps but don't know much about that.
I solved this issue the next way:
remove appendTo="body"
add overflow: visible to ng-select
<ng-select
style="overflow: visible;"
...
</ng-select>
make sure the position for dropdown is relative and no extra spacing is applied
Remove appendTo="body" only.
It will work as you expected.
appendTo=".your-class"
add this line to <ng-select>
::ng-deep .ng-dropdown-panel {
left: 0 !important;
right: 0 !important;
margin: 0 auto;
}
//this worked for me perfectly fine
Still pretty new to css and I need a hand.
I have this site: https://nuebar.com/ and it has drop downs under hair, about etc…
I need to get the dropdowns aligning to the right edge of the menu item instead of the left.
Dropdowns are currently absolutely positioned but I'm unable to use this to get them aligned how I want them to be.
Would love some insight on this
Dropdown menu css add for right:0; and parent li css add postion:relative; Below mentioned css code add and check.
.DropdownMenu{right:0;}
.HorizontalList__Item{position:relative;}
I have a horizontal navigation menu that breaks upon browser window resize as illustrated here:
https://jsfiddle.net/7oLjwh90/2/
Now the culprit here is:
#adminNav ul li { float: left;
But as soon as i remove float and do display: inline-block for example the dropdown stop working. It becomes a pure mess.
Tried setting display to inline-block and also recreated a new simple horizontal menu and that behaves as expected but cant get this dropdown to work without float.
https://jsfiddle.net/7oLjwh90/2/
Same menu as on https://jsfiddle.net/7oLjwh90/2/ but it doesnt break upon browser window resize. The list items should not stack on top of each other.
Not sure what exactly you wish to achieve. If removing the float property is your problem, you can try using flexbox(here is some good information on the matter -https://www.w3schools.com/css/css3_flexbox.asp). If this doesn't work for you, specify your question further. Hope this is useful.
After sucessfully using the answer posted here navbar dropdown menus display issue on mobile and small devices with media query, I have now this JSFiddle http://jsfiddle.net/qxgy6L9b/23/.
However, I still have an issue I can't accomplish to fix. If i click on the second dropdown list, it is not possible to click on any item of this submenu. It is due to the fact there is another list item just after. If i remove this item list, the dropdown menu items are clickable.
I guess, this is linked to this CSS code:
.dropdown-menu{
position: static;
width: 100%;
box-shadow: none;
background: inherit;
}
I tried several things but impossible to make the items of the second dropdown list clickable if I have an additional item just after.
Does anybody have an idea ? Thank you very much.
I think I found the solution. I replaced the position from absolute to relative and now I have the correct behaviour.
Hope it will help others people :)
I got the the drop down menu to work using text instead of an image and I got the drop down menu to actually go up (added bottom: 100%; to nav li ul) but I still can't seem to get the CSS formatting right.
Below is a link to my test page as well as the style sheet...
Need help making my footer navigation be in one line instead of having the new drop down Services menu on it's own line.
Need to simply center the drop down / up sub menu items when you hover over the main Services link.
http://wsgdev.com/ceiltex/indextest.html
http://wsgdev.com/ceiltex/styles.css
Thanks so much in advance for any help!
Remove the width: 100% and add display: inline-block to the nav element (style.css line 27)
read more about inline and block elements