so I am currently working on a web-app with a nav-bar on the bottom. I decided to have a linear-gradient overlay above the underlying elements in order to make the menu more visible.
You can see in this screenshot what I mean, I think.
Now I faced the problem that when an item I want to be clickable is just below that, one can obviously not click that. I can't change the z-index since that would defeat the whole purpose of the overlay.
The Overlay is just a background applied to the menu div, which is located at the very bottom in the dom.
Its CSS:
div{
display: flex;
align-items: center;
justify-content: space-around;
position: sticky;
bottom: 0;
padding: 5em 0 1em 0;
background: linear-gradient(var(--opaque-main-background), var(--main-background));
}
All the other elements, including those I want to be clickable have no particular positioning. It's a vue app, so if you need any more information I forgot, here is a live demo. You may have to resize the window for the issue to kick in
Is there any basic/simple solution to this problem I am just not seeing right now?
ok. here is a solution.
add pointer-event:none to this menu div above in css.
then to each span add a pointer-event: auto like this:
span[data-v-4fb6fd22] {
position: relative;
pointer-events: auto;
}
You can use pointer-events here. Just add pointer-events:none to your css for div
div{
pointer-events:none;
display: flex;
align-items: center;
justify-content: space-around;
position: sticky;
bottom: 0;
padding: 5em 0 1em 0;
background: linear-gradient(var(--opaque-main-background), var(--main-background));
}
Hope it helps.
Related
In my popup window, all info and inputs are usually fully displayed when first triggering it, however, I have a textArea box that I can expand to whatever height. Upon expansion, I want the entire popup to scroll on the page, not just that particular div which holds the expanded textArea.
I'm using this bit of CSS to make my popup window full height and scrollable when I expand the textArea.
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
Everything worked as intended with that bit of CSS, however, I noticed that the popup no longer closes when clicking the overlay, and it's due to the pointer-events: auto, but removing this bit of CSS brings me back to square one where the popup doesn't scroll with the page when I expand the textArea.
Any ideas on the quickest, cleanest way to have both behaviors?
Please use the below style.
.cdk-global-overlay-wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
I have centered these 2 black buttons inside the grey div successfully with flexbox like this image
`
#outerDiv{
display: flex;
justify-content: center;
width: 100%;
background: #888; /* Only for demo purposes */
opacity: 0.86;
/* Styles for fixing always at bottom */
position: fixed;
bottom: 0%;
}
#innerDiv{
display: flex;
justify-content: center;
margin: 0 auto;
}
The problem is that I want the black buttons to be clickable but the outer grey div not. Grey div actually prevents me to click the page below (like the "ADD TO CART" white buttons showed in the image or anything under its hitbox).
I think the problem is caused because I set width 100%; display: flex so I am wondering if there is a solution for centering the black buttons without setting a display: flex div without the div taking full width and preventing me to click or if I can disable the outer div clickability but preserving both the page under that div and the black buttons clickability.
(I have already tried playing with minor z-index in innerDiv that in outerDiv)
Maybe is useful to let you know that I am using React, Scss and StyledComponents
You can set the CSS property pointer-events to none on the outer div,
and also set it to auto on the black button to do this.
A stackoverflow code example
The MDN documentation
An article about its usage
Check this post How to disable clicking inside div
Try by adding this to the outter div:
pointer-events: none
It's because of the width: 100% on #outerdiv
Set #outerdiv { width: auto; margin: 0 auto; } to center it
I have a drag and drop using react, it's working just fine, but the element that i am dragging on my menu has a css like this:
.objects {
position: absolute;
background-color: #FFF3CC;
width: 50px;
height: 50px;
margin: 10px;
padding: 8px;
font-size: 18px;
text-align: center;
cursor: move;
}
I use the position absolute to stack 10 elements and with that i can drag 10 times into my drop zone, this also works fine, but it keeps the property position:absolute, so when it renders on my drop zone it stacks again.
I want to remove the css 'position' from it when i do the append:
event.target.appendChild( this.get_id(elem_id) );
How can i remove this property so i can display them separately?
code for chaging css properties in javascript:
document.getElementById("myElement").style.position = "relative";
and just in case, the position options are:
static
relative
fixed
absolute
sticky
UPDATE: It looks like this is a specific bug on the Safari iOS ONLY. Website when loaded as a web app (save on home) does not display
the same gap/buffer. You should only be able to solve this.
JSBIN - View it on Mobile safari vs other browsers.
Live output: http://output.jsbin.com/winuta/
JSBin: http://jsbin.com/winuta/edit?html,js,output
Original Post
This is a very basic stripped down version of a text area in a DIV with Fixed to bottom.
I'm using the Flat Bootstrap Admin V3 template, which has to be debugged for a long time since many of the messaging portion is buggy.
My page displays correctly on all browsers except for Mobile Safari which created a buffer/gap between the keyboard and the body when my text field is focus.
I manage to work out most of the bug however when it comes to mobile, i have this problem on iOS Safari where when I focus on the text area, it creates extra buffer under the webpage (I use body max-height at 100VH - Buggy i know, but i already resolved the issue using JS and $(window).innerHeight() which works great), no matter how I do.
I tried adjusting all the different div height including body height to minus another 60px away using JS and it still leaves the gap. All other browsers it will stick to right above the keyboard, but not iOS safari.
Any one can shed some light?
The text area code
<div class="footer">
<div class="message-box">
<textarea id="draftmsg" placeholder="type something..." class="form-control"></textarea>
<button id="sendmsg" class="btn btn-default"><i class="fa fa-paper-plane" aria-hidden="true"></i><span>Send</span></button>
</div>
This template is base mostly on flex but for the footer i using
.footer {
position: relative; /*Relative to the text display area which occupies whole viewport minus footer*/
bottom: 0;
}
Above image shows how it should look normally without keyboard and
user cannot scroll past the text area since text area sticks to
bottom.
but the image shows the gap between keyboard and text area in mobile
safari
Above image shows other mobile browsers Chrome and Firefox displays
fine without the extra buffer.
UPDATES (Answers to questions from comments)
My meta header has already set as follow
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Complete CSS for footer
.app-messaging .messaging > .footer {
width: 100%;
padding: 8px;
background-color: #dfe6e8; }
.app-messaging .messaging > .footer .message-box {
background-color: #FFF;
border-radius: 2px;
box-shadow: 0 1px 1px #c8d1d3;
width: 100%;
height: 80px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
border-top: 1px solid #dfe6e8; }
.app-messaging .messaging > .footer .message-box textarea, .app-messaging .messaging > .footer .message-box button {
margin-bottom: 0;
border: 0;
height: 100%;
border-radius: 0; }
.app-messaging .messaging > .footer .message-box textarea {
-ms-flex: 1;
flex: 1; }
.app-messaging .messaging > .footer .message-box button {
border-left: 1px solid #dfe6e8;
color: #29c75f; }
.app-messaging .messaging > .footer .message-box button .fa {
margin-right: 1rem; }
#draftmsg {
line-height: normal;
padding-bottom: 0;
margin-bottom: 0;
}
My mobile web debugging is very spotty, and I'm a backend developer mostly so please excuse me if I'm wrong...
I believe it may be because of the bottom: 0. Change it to a top: property to check. That may not help much, since you do need to put it on the bottom, but if it is the issue, then consider switching to flexbox to position it if possible.
If not, the fix might involve setting "height=device-height" in the viewport meta tag. But if I remember correctly, that only works if the item in question is at/near the bottom.
Hope this helps...
First, do you have media queries which may be non-intuitively applying?
Second, as you're using flex box, to the end of aligning all elements within the footer container at the bottom of the page: why not make the .footer container
display: flex
flex-direction: column-reverse;
Third: Consider using
margin-top: auto;
to force the element to the bottom of it's parent container, similarly to:
justify-content: flex-start;
That said, if you aren't using justify-content on the container, this might be the root of your issue.
Finally, and not the most maintainable and ideal solution, but should make due, if you can determine that the element is positioned in this way due to a brower issue beyond your control, you have options as well. OS detection and negative margin come to mind. With javascript, setting negative margin-bottom could reposition your element as needed.
//safari
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
//ios
var isIos = navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)
//Version
var isIosVersion= /(iPhone)*(OS ([7-9]|1[0-9])_)/i.test(navigator.userAgent);
Take a look at this page I'm working on: http://s361608839.websitehome.co.uk/textcube/
The nav bar is going behind the slider and I wanted it to sit above instead. I've tried setting a high z-index on the #navbar and #navbar-inner and nothing happened.
#navbar{
background: url(../images/nav-bg.png) repeat-x;
height: 55px;
margin: 0;
padding: 0;
z-index: 9999;
}
#navbar-inner{
width: 912px;
margin: 0 auto;
position: relative;
z-index: 9999;
}
I think the javascript slider using CSS style .bx-window and .bx-window are the cause however I have set a low z-index on both, yet I don't see any difference.
Help with this would definately be appeciated.
Cheers
z-index works only with positioned elements (position:absolute, position:relative).
Here's an article http://www.w3.org/TR/CSS2/visuren.html#z-index
In your case, you forgot to add position to one of your element.
Add position:relative to #navbar
It works with either float:... or position:...