DataTables row moving behind bootstrap modal using RowReorder - javascript

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/

Related

Disable scrolling when pop up open and menu not showing on mobile

thanks for looking into my issue
I am creating a website: http://testgod0312.000webhostapp.com/ , all the css are separate by blocks so that it is easier for you to potentially help me (in assets folder).
when you go to map and click on a button, a pop up shows up, but you can keep on scrolling. The button is only coded in css (no js), everything in the map.css file - any idea how to disable overflow without resorting to js? if using js, what would you do as there is no function capturing the opening / closing of the box?
I have a menu (click top right corner), works fine on laptop but on mobile, it shows only 50% of it. The code is in nav.css; with the responsive at the bottom. Any idea on how to display it all?
thanks in advance!!
fafa
#1 can't be solved without javascript as long as browsers are not supporting css:has(). So the only way is to apply a class or a style="overflow: none;" to the body as soon as a popup gets opened and remove it after it was closed. The very same happens already if the menu is opened/closed.
A very small code snippet would be enough:
window.addEventListener("hashchange",
() => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);
and CSS
body.popup-open {
overflow: none;
}
About #2 inside the nav.css the values applied before the media query (#media all and (max-width: 767px) {) cause the issue.
The menu__right changes from flex to none on small screens. And menu__left still has the right 50% value applied for bigger screens, So adjusting this value inside the media query to 0% solves it.
.menu__left {
right: 0%;
width: 100%;
}

react-select not showing assets properly on react-modal

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.

Affix Bootstrap falling onTop of Sub Navigation instead of above, Bootstrap

I cannot share the link to the webpage at the moment for confidental reasons but I will describe my issue as much as possible with the required code.
I am running the affix javscript from Bootstrap 3.3.6 and have built the page on anchor points so that the the menu stays affix right above a sub navigation.
My order of elements are:
[MAIN]
[HEADER]
[CAROUSEL]
[NAV]
[ABOUTBOX]
[CONTAINER/ROW]
[SUBNAV]
[LIBRARYBOX]
[CONTAINER/ROW2]
[SUBNAV2]
[CONTACTBOX]
[CONTAINER/ROW3]
[SUBNAV3]
[FOOTER]
[/MAIN]
The Affix JS I am using
//AffixJS
var tfv=$('#carousel-nmhead').offset().top+$('#carousel-nmhead').height();
$('#navbar-main').affix({
offset: {
top: tfv,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true));
}
}
});
CSS
.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
}
The Issue
Essentially the nav drops correctly right above my sub navigation as planned once the "affix" class is set
The moment it is still on "affix-top" then on the first click/interaction with the menu - the nav overlaps the sub navigation and it is only on the subsequent click that the nav will reposition itself anew
Attempted solutions
Add
negative margins/paddings,
create new anchor divs within the main 3 content divs
tried debugging this different or fixed heights on the containers instead of min-height 0 !important;
other minute misc. troubleshooting
gone through google dev tools to inspect and play around with the JS HTML and CSS but no luck
I am the only one working on CSS/JS at the firm and the only colleague with similar exp cannot comprehend why the Affix is not working on the first click/interaction with the nav but only on the subsequent ones
If you click on ABOUT (nav has About/Library/Contact as links) the page bounces down to About and if you click ABOUT a second time it scrolls up and since that is when the affix commences, the sub navigations suddenly pops out underneath.
Afterwards with the "affix" class set if you click on LIBRARY or CONTACT then you correctly bounce between them showing the sub navigation each time.
However if you click on ABOUT anew then the state goes back to the top of the page and you have click on the button twice again so that the sub navi pops out underneath
If this can't be trouble shooted without code I'll try to make a blank page so that we can clearly see the impact
Thanks a lot!
I had a similar issue with an affix not updating until I clicked somewhere in the body. I fixed it by adding $(element).affix('checkPosition')

Bootstrap Collapse over an element

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.

Bootstrap 3 Modal with texarea inside. When tap/focus on textarea, the background scrolls to top. Only in iOS 8

I'm using Bootstrap 3.2.0.
I can show the modal just fine and the background stays in place. The modal contains a textarea. When I tap or focus on that textarea and the virtual keyboard comes up, the background scrolls to the top.
This only happens with iOS 8 and not iOS 7.
It's like iOS 8 wants to put whatever is focused on in the middle of the screen and it scrolls until that element is in the middle. It scrolls up and up and up until it hits the top THEN pulls the modal down a little.
Very frustrating. Has anyone experienced this yet? Any solutions?
Update: I'm thinking it has to do with the fact that the modal is fixed position and not absolute. iOS wants to put the focused element in the middle of the screen so it scrolls the viewport or document up until the element is in center but scrolling does nothing because the element is position fixed.
The solution for me was to set the modal involved to position:absolute; (by default it is position: fixed;) and instead of placing the modal at the bottom of my HTML by appending it to the body, I appended it to the parent element of the button that I clicked to show the modal. I also needed to ensure that the element that I was appending the modal into had a position of relative.
CSS
.modal.fade.my-special-modal {
position: absolute;
/* 'top' is not required but I did it for my taste */
top: 15px;
}
.my-special-modal-container {
position: relative;
}
HTML
<div class="my-special-modal-container">
<button>Show the modal</button>
<!-- js will inject the modal here -->
</div>
Thanks to #Christina for helping me discover this solution.
you can add this property globally:
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
}

Categories