For a client, I have to do fullscreen website, responsive design. I am using Bootstrap with a fixed navbar, so in order to place my content, I added a 60px padding-top to the body.
Here is my problem : the scrollbar shows systematically, because my body have a height of 100% and a 60px padding-top. I can use 'overflow: hidden;', but then if I need to scroll a page I can't anymore.
Do you have a solution ?
Thanks!
EDIT : Here is the idea : http://jsfiddle.net/StFca/
In this case, I would like the scrollbar to be hidden, 'cause there's no need of it.
Instead of adding padding to the body, you can add a margin-top: 60px property to a new class or id that you can add to your main container of your content, so it would look something like this:
#main-container {
margin-top: 60px;
}
This way you can accommodate your navbar by pushing the container itself away from it instead of the body of the document and the scrollbars will disappear.
Related
How do I remove the min-height style at content-wrapper class for AdminLTE. I am having issue that right side bar is too long and my page does not requires it.
When I debug and close the min-height, everything looks fine.
My code doesn't have min-heightat the style, I am not sure where it comes from and how i can tweak it.
Code
<div class="content-wrapper" style="margin: 0px;">
</div>
Suggested solutions
.fixed .right-side {
padding-top: 50px;
min-height: 100% !important;
}
Your solution is to override the .content-wrapper class.
.content-wrapper{
min-height: 100% !important;
}
if you have sidebar menu in your panel and content menu is Higher than main content height , it is ok and you shouldn't change this part because if you change it breakdown your template. if menu's height is less than main content but you still have scrollbar
It is because of this aside with main-sidebar class. it has padding style. removed this padding top and add this padding to user-panel class
So I've got this problem that my jumbotron goes under the navbar and I want to put it just below with some padding between them.
Here is my code: https://codepaste.net/ditsxf
This is how it looks like
Try adding this to your .css file:
body {
padding-top: 50px;
}
Or whatever the height of the nav bar is.
The classes from a bootstrap added a position: fixed; to your navbar. It means, that your navbar is always visible at the top of your screen all the time, even when you are scrolling down.
There are 2 ways to fix this:
Remove .navbar-fixed-top class from your nav component, but then you won't see your navbar at the top when you scroll down.
Add some margin-top to your container element.
I'm a very noob CSS coder, but I would expect that if I add another line or a taller element in the navbar, making it higher, to push the body down. Instead it covers the top of the body, and I must increase padding on the body to push its top down below the navbar.
What CSS is at play here and why?
ProfK Hi there.
All you need to do here is add this css.
<style>
body {
padding-top: 50px;
}
</style>
And that will fix it for you.
Added to this
Here is a Fiddle this does what you are asking here.
What I do here is remove the padding-top or set it to zero.
I use a div to wrap the navbar and give this div a class of this-wrapand set the height to 50px the same as the height of the navbar.
Now what ever you place next in the body will be lower than the navbar and not under the navbar.
Does this help?... to act more as you expect.
I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.
I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
I had the same problem, and applied this to fix it:
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
#media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.
The "overflow: hidden;" style is the remedy not the prevention.
If you want to prevent this you have to check your body elements which is larger than the body.
It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap).
So remove all padding and margin outside the container class.
It turns out I had zoomed in more than 100% that was causing the page to scroll. Cmd+0 helped bring the zoom to 100% which got rid of the scrolling.
Try to add (in the relevant #-rule) a max-width:
img {
max-width: NNNpx;
}
That'll prevent img from being too wide.