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
Related
I have created a plunkr here
I have a main page with left navigation (index.html). When I click on Header details the AddHeader.html page should be opened. Where I have added all the files. I think I am missing out something due to which the AddHeader.html page is not getting perfectly fitted in the main page. When I run this in internet explorer the AddHeader.html page is always shown at the bottom. Please help.
I am just adding a snippet from index.html where I have added ng-view:
<div class="pull-right" style="margin-right:20px">
<div ng-view></div>
</div>
Navigation bars are fixed, you have to set margin for the content. I have updated your code here
Look at index.html line 58, as your code above, I have removed pull-right and added a class page-content to the div and set margin for it in CSS:
.page-content {
margin-top: 50px;
margin-right: 20px;
margin-left: 140px;
}
You have a navbar on the left with position: fixed. You either need to float the navbar and container to the left (which probably wouldn't be desired behaviour), or account for this with a margin offset on your container:
.container {
margin-left: 60px; /* Equal to the width of your navbar */
}
Hope this helps!
I have a navigation bar with 40px height and I can't place my other content (just a textarea) below this bar. I tried to set margin-top:40px; to the textarea but it doesn' t work.
Then I used padding-top:40px which is ok for the content inside the textarea but as you will see has a problem with the scrollbar (it gets behind the bar).
Just take a look at this jsFiddle
Add padding-bottom: 40px to the nav, and remove it from the text-area.
use
postion:fixed;
and margin to push contents out
http://jsfiddle.net/4Y63u/3/
As an alternative to #Andrw Ice's answer
You just have to give the textareas margin something to push against.
JSfiddle Demo
This is common...as the advantage is that it doesn't cause any of the elements to moveif the navbar is hidden.
body {
border:1px solid transparent;
}
nav + textarea{
margin-top: 40px;
}
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.
Pages that have the AddThis code are very wide because of the AddThis code. As a result, a horizontal scroll bar appears.
Removing the code, or changing the page direction to LTR fixes everything and the page width is back to normal.
Like mentioned, the problem happens because I'm using RTL direction (html dir="rtl") and when I tried to put the Addthis code into a div which has direction LTR, it didn't help.
How can I get rid of the horizontal scroll bar and yet use a RTL direction?
There are some spans in AddThis html which are automatically added to page. some of those spans use ".at_a11y" css-class in which there are a left attribute that is the main reason of horizontal scroll.
.at_a11y {
position: absolute!important;
left: -10000px!important;
top: auto!important;
width: 1px!important;
height: 1px!important;
overflow: hidden!important;
}
Solution: You can define your own '.at_a11y' css class in your own css files and override the left attribute to a normal value. This will cause the above css attribute to be useless and then horizental scroll will disappear!
.at_a11y
{
left: auto !important;
}
I had the same problem and i found the fix in your question!!!
the RTL LTR is the point and what idid was to make CSS style for the inner div insted for the body.
<body>
<div class="wrraper">
-- the cod for the addthis some where in the page... --
</div>
</body>
when in the css the .wrraper is position LTR insted of RTL
the exem:
http://www.visualtext.co.il
put html{
overflow-x:hidden;
} will solve this problem
On the website http://thornhillss.ca/pages.php?id=7 The footer looks fine in every browser. Yet in chrome it doesn't touch the bottom of the frame. Why is that. It should be a simple fix however I just dont know why it wont work.
*It should stick to the bottom of my div. Not my page.
This is because the div with the id "main2" isn't set to expand with the right-hand floated div. By default divs won't expand to fit floated child elements, so you need to tell it to hide overflow (which will tell it to expand to fit all child elements as long as you don't also give it a fixed height):
#main2 {
width: 860px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
overflow:hidden;
}
You're p.clear class has a margin on it as you're not using a reset.
If you add margin:0 to your .clear styles the margin goes away and it displays how you want it to.
This is what you are looking for it works and is awesome sticky footer