I'm using react-select to have a select field on a modal I create with react-modal. The assets are not showing properly as shown in this image (the arrow is not being shown, and the displayable list is not being properly shown).
The modal, has a custom z-index (because it is shown on top of another element that has its own z-index) in this way:
.Modal {
// more stuff
z-index: 81;
}
.Overlay {
z-index: 81;
}
I think this is the problem, but I cannot manage to properly add the z-index to the react select to show ir properly.
I can add the code for the modal and the select if needed.
Well, this solved itself. It results that I was not properly including the css for the select. I included it and it started to show just fine.
Related
I'm having a really hard time with this.
I'm using Vue Multiselect and Bootstrap's 3 Input Groups.
The problem here is that the multiselect options show behind the input group no matter what z-index I use on it. I know that I can change input group z-index to 0, but watching Bootstrap SASS files it says: "Ensure that the input is always above the appended addon button for proper border colors" so I don't know if it is safe to do this:
.input-group .form-control {
z-index: 0;
}
I tried every selector on the multiselect but none makes effect. Any help would be appreciated.
Here is the fiddle: https://jsfiddle.net/cristiancastrodc/c9gdxg3s/
It looks like the cause of this is that in the vue-multiselect.min.css file that defines these stylings, .multiselect--active only has a z-index of 1. Clicking the multiselect dropdown toggles that active class.
Changing the z-index on .multiselect--active to something greater than 2, which is the value for the input box, would probably be the best way to solve this issue.
I've put this updated solution in a new fiddle.
Try
.input-group {
z-index: -1;
}
I have a html select using Bootstrap-select library. If I define no data-container the list works OK but I have a problem of overlapping. Basically, I am rendering the select (without data-container) inside a container which must have overflow-y: auto;. When the select tries to open above a navbar (main menu) it is overlapped and cut. See JSFiddle here (you must force the dropdown to be opened as drop UP).
The proper solution for me, I think it would be to define a data-container. However, as soon as I do this, the list is misplaced. See JSFiddle here (you must force the dropdown to be opened down, not up).
Another suggested workaround was to set data-container="body" instead of my own container div as previous example. This DID solve the first scenario, but it breaks for other cases. See this JSFiddle and dropdown the list "State" (so that it is opened below) and you will see how the list is misplaced (but below where it should be) letting a big empty space between the dropdown button.
Note that I would appreciate the same solution to be applied everywhere, not a solution that I would need to adjust for every place I render a list.
This has been fixed in the master branch of bootstrap-select, and will be available officially in v1.11.0. See https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255.
Continuing discussion from : https://github.com/silviomoreto/bootstrap-select/issues/1422
What do you mean by "a problem of overlapping" ? The fact that the select options are displayed over the heading is not an UX issue for me : this is how the native select works, and users can still click elsewhere to dismiss the menu.
Specifying a data-container would just limit the options menu inside that container, which might not be optimal for your case. Additionally, the issue specified above states that there is a positionning issue with this option.
just add the position: sticky; in bootstrap-select.css to the below class
.bootstrap-select.btn-group .dropdown-menu {
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: sticky;
}
I´m using DataTables on a Bootstrap modal window, and when I implement the RowReorder Extension works fine, except that the row following the mouse pointer occurs behind the modal. Is there a way to set that up so I can see the row moving in front of the screen over the modal window? Something like z-order or so? Thank you very much in advance.
By default a bootstrap .modal have z-index: 1050 and the .modal-backdrop a z-index: 1040. So all you have to do is to ensure the z-index for the RowReorder floating element has a higher rank :
table.dt-rowReorder-float {
z-index: 2000;
}
demo -> http://jsfiddle.net/L82z0jgj/
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
I want to display an input form attached to an input field like the datepicker does.
I've tried the "show" function, but instead of displaying the input form overlaid, it shows what was hidden and moves the rest of the page down.
There are many overlay libraries out-there, but none (that I've seen) attaches the overlaid form to the input field, like the "datepicker" does.
Is there a simple way to accomplish this? (preferably no other external libraries, other than jQuery or jQuery UI).
Thanks!
The problem you're having is CSS related.
Just apply some absolute positioning on the DIV you're showing via .show().
Example :
// jQuery is :
$('#yourDiv').addClass('yourDivClass');
/* CSS is : */
.yourDivClass {
position: absolute;
top: 50px;
left: 100px;
}
Adjust left and top values to your likings.
As far as I know, there is no library or plugin for this (correct me if I'm wrong). You should use CSS absolute positioning for the form, and set the top/left properties on the form to the offset of the input field. Here is a quick example of how I'd do it: http://jsfiddle.net/85ZkV/