The chosen dropdown list always goes underneath the next available card element on the model.
I have tried
.class-of-dropdown {
position: relative;
z-index: 5000;
}
.modal-body {
overflow-y:visible;
}
Here is the jsfiddle example.
I have tried several fixes and none of them seems working.
Chosen dropdown within Bootstrap modal is hidden behind modal footer
How to Solve Option Select appeared behind modal using bootstrap?
Bootstrap dropdownlist z-index displaying under modal window footer
how to make chosen select go over parent div
There is a CSS that is causing this problem. After the modal opens, there is a div called "Another Heading" which has a class called card. This card class has a default scss which is causing the problem;
.accordion > .card{
overflow: hidden;
}
The solution is just to write the CSS given below to override this CSS;
.accordion > .card{
overflow: inherit;
}
Related
I am using popover of ngbootstrap on tables items click.
tables css:
{
position: relative;
overflow: scroll;
}
because I need to scroll on Y axis.
but the popover is not showed all ( I tried to put it on top also but same )
Are you trying to override bootstrap CSS? If yes, try overflow: scroll !important; to see if it does take change. It is not the most recommended way but you can have a workaround.
I'm trying to make a CSS only sticky menu. This menu is inside another div under the header of the website. But as the user scrolls it should remain visible on the page. Googling and looking for answers here I found a good example of what I want to achieve: http://jsfiddle.net/g7x102s4/ (the red div)
My problem is that I'm doing this inside a React app where I can't install any other plugin, so It has to be done in pure CSS. I made a codesandbox where I'm trying to get it working. The menu class can float inside the menu container, but always visible to the user. It's the same effect from the first link above, just without JavaScript.
Is it possible? If so, how can I achieve it?
Add properties position:sticky and top:0 to your menu.
.menuContainer .menu {
background: red;
height: 300px;
position: sticky;
top: 0;
}
I using twitter bootstrap modals on a one pager website. When I click on the button to open the modal, the background jumps to the top of the page and opens the modal. The same thing happens when you click the close buttons inside the modal.
I tried adding the code below to my CSS file. This stop the background from jumping to the top, however, I can now scroll through the background with the modal opened which I don't want as well. And also when my modal have overflows, I can see both the scroll bars for the modal and background.
body.modal-open {
overflow: visible;
}
Is there another way to solve this jumping problem without enabling the user to scroll through the background while the modal is opened?
If you have the height of either body or html is set to 100% as in my case, add the following to your CSS file:
html, body {
overflow: scroll;
}
The background now should keep its original position.
In case this helps anyone for this exact scenario, the following CSS solved the issue:
body.modal-open {
position: inherit;
overflow: visible;
}
body.modal-open .modal {
overflow: hidden;
}
The first block allows the page scrollbar to show and prevents the jump to the top when opening the modal. The second block stops the modal overflow adding its own second scrollbar.
Add following class in css:
.modal-opned {
overflow-y:hidden;
}
add it to body tag when modal is opened and remove it when modal is closed.
As I also struggled for days with this problem, my solution was simple - I played with the HTML and I found that when the modal was closing .modal-backdrop was causing the issue. So I simply commented out this from my CSS and everything is fine now. Use your Browser inspector for problems like this!
//.modal-backdrop + #app-wrapper {
//overflow: hidden;
//}
.modal-open{position: inherit}
This is because modal-open is a class added to body, when modal is opened. Make sure it's position is not fixed , If it's fixed make it inherit, that will help you to stay in the same place when popup is opened
You can use the following code and it should work fine:
<div class="modal" id="modelId" role="dialog" aria-hidden="true" data-backdrop="true">
<!--Model code -->
</div>
Assign the above id to any button or link and your model should load up just fine without any issues.
I had the same issue and removing href="#" solved it.
Please take a look at this page
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
Do you have any idea how to fix this?
Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
.banner {
position: relative;
z-index: 10;
}
You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
You can play with the z-index of other elements to keep them above others on the page.
Check if the overflow setting is set to hidden, if it is remove the value.
.banner {
overflow: hidden // remove
}
The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.
Try adding the following styles to class dropdown:
.dropdown {
position: fixed;
z-index: 9999;
}
I'm simply trying to display a textarea control inside a Twitter Bootstrap tab pane. I want the textarea to span the entire width of the tab pane, so I've added the row-fluid class to it. This works, but there seems to be some additional padding added to the textarea, causing a nasty horizontal scrollbar to show across the tab pane.
Here's a screenshot to demonstrate what I mean:
Here's a jsFiddle.
How can I get rid of the scrollbar?
Just remove (or if not possible, override) the overflow:auto; on the <div> with the class .tabcontent, e.g.
div.tab-content {
overflow:visible;
}
jsFiddle here.
or give a smaller width that doesn't overflow the scroll
.text_area {
width: 200px;
}
or
.text_area {
width: 90%;
}