Plunkr : http://plnkr.co/edit/17ime385yybvlCXWBsTX?p=preview
Accordion tab overlaps the ui-select (not ui-select2) search result. I have recreated the problem in the plunkr. I tried tweaking css with z-index but doesn't seem to work. Any idea how to fix this
div with class "select2-drop select2-with-searchbox select2-drop-active" has position absolute. If you change it to relative or inherit, it will appear.
.accordion-body.in { overflow:visible; }
The above css code was all needed. Apparently the problem was with the bootstrap accordion and not the ui-select.
Related
I have such an issue. When I click on ui-select the dropdown appears normal. But if I will resize the window the dropdown became larger than ui-select and sometimes ui-select pushes other inputs to the left.
Who faced with this problem? Any solution?
Updated
I found the solution. I have to apply css 'width: 100% !important' to input with class .ui-select-search and thats all. Sorry, it's hard to recreate the problem in plunker.
I am facing issue with Angular ui-select (replacement for HTML select). I have added the option append-to-body so that it can be shown on top of other elements.
But I am facing an issue that when it is used on top of bootstrap modal, it does not show list of options. In fact it shows the list of options are displayed behind the modal, as you can see in the image.
Is there any workaround that issue?
Simply add a z-index CSS property greater than 1050 for the parent element of the ui-select element.
Why greater than 1050?
Because the z-index on the .modal class is set to 1050 so we need to provide higher z-index of the parent element of the dropdown so that it can appear above the modal in z-axis.
I was facing the same problem and in my case I was using append-to-body="true" in my ui-select directive. Setting this to false fixed it for me.
I am new to Bootstrap and Angular. In my webpage there is a button and i am providing a popover for a span like this
<span popover="Download Project History" popover-trigger="mouseenter" tooltip-placement="top" style="padding: 5px" translate="DOWNLOAD">DOWNLOAD</span>
But its getting hidden under navbar.
Based on my googling i found to provide data-container="body" in the html element. But its not working too.
Can anyone please help me?
Thanks
I had a similar problem where the popover was hidden behind overflow content and adding the following attribute fixed it:
popover-append-to-body="true"
tooltip-append-to-body="true"
attaches the tooltip to the body and makes it visible.
You need to override the z-index value, you can have a look for the default values (for navbar and popover) in original Bootstrap's CSS file. In my case this helped:
.popover {
/* just in case it would overlap with fixed navbar, then show this over the navbar. Original value 1010, value for navbar is 1030 */
z-index: 1030;
}
I wan't to use flexbox layout with angular ui tabs (ui.bootstrap.tabs). I have this plunker:
http://plnkr.co/edit/9ToL1WLwgDVT0DldMnaa
I changed the ui-template thus all div's get the flexbox classes. Still the tab content div is not filling up the fully available space.
Any idea?
I have found a solution. Here is an updated plunker:
http://plnkr.co/edit/oswSGYApFj9sSohms0FS?p=preview
The key is to override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'.
I'm working in a project, where I have to show a typeahead in a ng-grid cell. But, the typeahead is not working in a ng grid cell. I have put a Plunker.
See that the typeahead is working in the same page above the grid. But it's not working in the ng grid cell. Can you please help?
Thanks in advance.
Spent quite some time tracking all the problems in your plunker, there were quite a number of them:
you were missing ng-model directive on the input elements used in grid's cell, there were many errors in the console
typeahead window is appended as an element after an input element so it means that you need to have it wrapped in a parent DOM element, ex.: <div>
The 2 above changes made the typeahead work. Well - partially. The correct DOM structure is generated etc. but nothing gets displayed due to CSS conflicts. It seems like both typeahead popup and a cell in a grid are absolutely positioned. This is a bit surprising for a grid but OK. The real problem, though, is that the .ngCell class has the overflow: hidden; property and it makes the typeahead popup invisible.
If you remove the overflow: hidden; from the .ngCell it all starts to "work":
http://plnkr.co/edit/pzLb3079yuhDtW1XIxvq?p=preview
I guess we are facing conflicts of Bootstrap's CSS and ng-grid CSS. We can't change Bootstrap's CSS in this project so you will have to decide to either bring this issue to the attention of the ngGrid folks or hack one of the CSS definitions.
More info about how to make work ng-grid + typeahead inline editing:
http://lemoncode.net/2014/01/28/ng-grid-inline-editing-using-bootstrap-typeahead/
plunkr:
http://plnkr.co/edit/8udsvZSokG5v37xicyuz?p=info