I've got a bit of a problem I can't solve. So basically I've got a fixed feedback button on my screen, looking like this:
.feedback-button-container {
position: fixed;
bottom: 0;
z-index: 3;
right: 15%;
}
<!-- When Modal opens <body style="padding-right: 17px;">
<body>
<div class="feedback-button-container">
<a>
<button class="feedback-button">Give Feedback</button>
</a>
</div>
</body>
I've also got a modal. When I open the modal it adds a padding of 17px to the right of <body>, this way the scrollbar will hide when the modal is open. The problem is that when I open the modal, because of the increased 17px of padding my feedback button shifts to the right. Is there some easy way to fix this?
EDIT:
I made a mistake in my wording, the 17px of padding aren't supposed to hide the scrollbar, they're supposed to add the space that the scrollbar left when overflow:hidden;
I think you want to remove the scrollbar from the modal rather than adding a padding to hide it. You can try overflow:hidden to do this?
Related
I'm trying to make a dashboard frame (in Bootstrap 5, but I don't think it makes any difference) that works like in these two pictures:
This is basically my current situation:
<html>
<body>
<div class="pretoolbar">pretoolbar (non-essential information, to be hidden when scrolling)
</div>
<div class="sticky-toolbar"> sticky toolbar</div>
<div class="container-fluid">
<div class="sidebar col-3">
[tall sidebar content]
</div>
<main class="col-9">
[also tall content]
</main>
</div>
<body>
</html>
CSS:
.pretoolbar{
background-color: #555;
color:white;
height:32px;
}
.sticky-toolbar{
background-color: black;
color:white;
height:56px;
position:sticky;
top:0;
}
.sidebar{
background-color: white;
position: sticky;
top: 56px;
overflow: hidden auto;
max-height: calc(100vh - 56px);
height: 100%;
}
I'm trying several approaches but it doesn't seem working. What I'm trying is of course position: sticky on the main sticky toolbar and on the sidebar. But due to the different available vertical space (scrolled-top vs scrolled-middle), after declaring a height for the sidebar (calc(100vh - 56px), 56px is the height of the toolbar) it results in the bottom part of the sidebar and its scrollbar to fall out of the viewport bottom. I'm considering flexbox, position:fixed, position:absolute... cannot find a way to get it through.
I also discovered a strange behavior (in Chrome at least) when you place a position:sticky inside a position:fixed
My goal would be to avoid JavaScript, I basically need a sidebar that changes its height after the sticky-state of the toolbar and sticky searchbox. (Or, to say it in other words, the top-edge of the sidebar should behave like position:sticky while the bottom-edge should behave like position:fixed;bottom:0).
Can you think of a way of achieving this without using JavaScript?
Please let me know if I am understanding your situation. First I would suggest getting rid off of the *pre-toolbar bar. Otherwise, the desired behavior is impossible without js. And since you mentioned the information there is not essential, you can put it anywhere.
However, if you still want it to be on top, then sticky of position fixed the toolbar and the sidebar. Do not use calc() It is better to use height 100vh and put it behind the toolbar so it seems to be shorter. Then, place a pre-toolbar on top (z-index) of your toolbar and animated it to disappear after some seconds.
Here is a codepen https://codepen.io/oscontrerasn/pen/WNpxJwV
I have this div:
<div style="padding:5px 100px 0px 100px; bottom:5px; position:absolute">
<div class="divLine" style="margin:5px 0px 10px 0px;"></div>
<div>
<p class="pull-right titleLink">© Ofir Messing 2013-2014 · <a class="titleLink" href="#">Link</a></p>
<p style="text-align:left;">למעלה</p>
</div>
</div>
</div>
I want it in the bottom of the page I tried everything. How can I do that?
I have an image under it.
http://jsbin.com/ginoveja/2
Hi just remove position:fixed it will solve the issue.
Don't position your images with position: fixed; for your current situation. position: fixed; is for keep an element fixed on the screen so that it never moves. When you view your images on a smaller screen, the text must move somewhere, so it overlaps the fixed images.
I have verified it in Mozilla Firefox fire bug by removing position:fixed attribute, it was working.
Best of luck.
I cant figure this one out. I use phonegap on an ios7. I have a pagecontainer in which I put page elements. I have select element which uses the default ios7 select list thing. The select gets a black background - so the text is impossible to read. If I remove the glb_pagecontainer and page from my css, the select list gets transparent as it should. so the problem seems to be with the glb_pagecontainer in combination with the page?
#glb_pagecontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="glb_pagecontainer">
<div class="page" id="pageid">
<div class="row row1" style="margin-top:50px;">
<section class="col">
<div class="input">
<select id="theid" class="inputpicker" style="text-indent: 92px;">
<option>one option</option>
</select>
</div>
</section>
</div>
</div><!-- End page -->
</div><!-- End glb_pagecontainer -->
It happens when the <select> element is too close to the bottom of the form. In that case the browser control overscrolls to keep the HTML control visible in the top half, while showing the selection spinner on the bottom. In the auto-generated Phonegap project, the default overscroll background is black, which combined with the new iOS 7 blurred background overlay, makes the text very hard to read.
One solution could be re-arranging your form so the select is not on the bottom, as well as picking a light background in your CSS for good contrast when the overlay appears.
For me the above was not possible, I only had a few selects on the form, nothing else. If you have created your project using the Phonegap CLI, open the file at:
[project-folder]/platforms/ios/[project-name]/Classes/MainViewController.m
and comment out or delete the following line:
theWebView.backgroundColor = [UIColor blackColor];
This is what responsible for the black overscroll background. By removing that line, it resets back to a default medium-light grey.
There is a pretty sweet Plugin, that let's you set the background-color of the Web-View - even dynamically during runtime.
It solved the problem for me.
https://github.com/EddyVerbruggen/iOSWebViewColor-PhoneGap-Plugin
What happens if you remove the following from the select element?
text-indent: 92px;
As mentioned by the OP in a comment, adding the value of
height=device-height
To the meta viewport fixes this for iOS 7.0.x , it's fixed on 7.1.
Put this line of code in css
html { -webkit-tap-highlight-color: transparent;}
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)