I have a base panel called BasePanel whose code cannot be changed.
I have a bar which is always a fixed height and this bar is NOT added in the BasePanel, but it is overlapped with the BasePanel .
I also have a panel called Container which is added to the BasePanel. Panel Container should be just under the Bar.
Now I want when the window size is changed, the Panel Container can automatically appear scroll bar, which I have already implemented but has a problem. The problem is when I window gets small the part of the scroll bar will be covered. I would like to know how I can solve this problem?
BasePanel {
width: 100%;
height: 100%;
position:fixed;
font-family: 'Arimo';
}
Bar{
height: 41px;
width: 100%;
z-index: 9998;
position: fixed;
top: 0px;
}
.Container{
width: 100%;
height: 95.570321151%;
top: 4.429678848%;
overflow: auto;
}
If I set container's top as percentage, the up arrow of the scroll bar will be covered by the Bar.
.Container{
width: 100%;
height: 95.570321151%;
top: 41px;
overflow: auto;
}
If I set container's top as 41px, the down arrow of the scroll bar will be covered because there is no enough space for it.
In other words, I would like to know how I can make the Panel Container always start from top 41px and no matter how the window size is changed, the Container won't get overflowed from the BasePanel so that the scroll bar will not be covered(Remember the Bar is not in the BasePanel)?
I figure out how to do it.
Just use calc() function to set the Container Panel height.
Such as calc(100% - 41px)
:)
Related
Say we have a fixed sidebar, this:
.sidebar {
position: fixed;
top: 0;
left: 0;
min-width: 17em;
height: 100%;
}
When the Safari bottom bar is visible it's ok, but when scrolling down it disappears and the sidebar remains for a while where it was and then jumps to fill the space below. It looks very buggy.
I tried to replace height with each one of the below solutions but none worked:
height: 100vh; // Sidebar is under the bottom bar
height: -webkit-fill-available; // Sidebar doesn't adjust its height
height: var(--window-inner-height); // CSS prop set via JS window.innerHeight. Same above
bottom: 0;
Any idea to solve?
You should use the environment variable safe-area-inset-bottom in your bottom margin or padding.
You can see an example in this video by Jen Simmons (see from 16:44 min)
I have a design issue in my app, the body text is scrolling through my nav- and command line and i don't know how to fix it. I'm not looking for a z-index fix where the body text flows underneath, i want to restrict the lorem ipsum filler text upper scrolling to just below the command bar. The body text is huge, and scrolling is necessary. Currently it looks like this:
Navbar CSS:
position: fixed;
width: 100%;
top: 0;
Command Line:
margin-bottom: 60px;
Body Text:
position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;
I'm using Microsofts ui-fabric grid system, and can post more code if necessary. But i was hoping there would be an easy "set vertical scrolling breakpoint for this div at x pixels from top" - or something like that. But i can't seem to find anything.
I guess i don't understand this well enough, so if someone can explain the big picture of how to resolve this scrolling issue, that would be helpful.
You can limit the height of the container in which the text is to a specific height and then set the overflow on the y axis to scroll, this will result in the behavior you want because the scroll is limited to the container div, thus the text won't scroll through the navbar.
Remember to adjust the margin from the top accordingly so it starts under your nav and command bar.
Example (assuming your navbar is 10vh):
#text-container {
height: 90vh;
margin-top: 10vh;
overflow-y: scroll;
}
If your navbar is for example 100px you could do:
height: calc(100vh-100px);
margin-top: 100px;
This would correct the height so it will always fill your whole screen.
If a horizontal scrollbar appears you can hide this with overflow-x: visible; or overflow-x: hidden;depending on the behavior you want
To start with an offset on the body text just give it a margin-top which is the same height as you nav bar, i.e.
margin-top: 50px;
This will give your body an initial spacing before it starts, after the user starts scrolling it'll
.full_width {
position: relative !important;
z-index: 5000;
}
I am using ngDialog for my popup windows. I can make it as wide as my whole screen but not as tall. Here is a style I am using:
<style>
.ngdialog.dialogcaseeditor .ngdialog-content {
width: 95%;
height: 100%;
padding-top: 5px;
overflow: auto;
}
</style>
height: 100%; does not even near give a maximum height.
Somewhere in the code then after a dialog is opened I can say something like this:
$dialog.dialog.find('.ngdialog-content').css('height', $window.innerHeight);
That will make the the popup window as tall as the whole screen, bu the screen itself will become scrollable, even though the popup does not exceed the screen.
As you can see, there is a vertical scroll bar on the right side.
Can this scroll issue be fixed?
Thanks
You can use CSS to hide scroll bars:
overflow-y: hidden;
overflow-x: hidden;
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did it.
I have a website with two divs aside the main body, on the left and right side, and both of them have images which are approximately 500px in width, combined with the main body width of 980px (it makes them larger than any normal screen resolution).
HTML:
<body>
<div id="#brandLeft">..</div>
<div id="#brandRight">..</div>
<div id="#mainbody">..</div>
</body>
CSS:
#brandLeft {
display: inline-block;
height: 890px;
left: 50%;
margin-left: -1010px;
position: absolute;
top: 171px;
width: 350px;
}
#brandRight {
display: inline-block;
height: 890px;
position: absolute;
right: 50%;
margin-right: -835px;
top: 171px;
width: 350px;
}
In the body I've already set the overflow-x: hidden, so I don't see the vertical scroll bar, but the page is still scrollable with the arrows and with the mouse center button.
I can't use jQuery to disable the scrolling so I was wondering if there's a way to have the divs with the large images, without having a scroll bar on the website?
Your images are to big for the side bars, so try this.
Remove the width and height of your images from the actual html.
Control the width/height of the images by using something like..
#brandleft, #brandright img {
width:100%;
}
Doing somethign like that should scale your images to the size of the Divs on the left and right side to get rid of the scroll bars. If that doesn't work let me know.