I have a set of forms on my webpage, they are dynamically generated and the width ends up being wider than the screen (this isn't a problem as it is designed to replace an exel spreadsheet with the same issue).
<body>
<div class='indented-form'>
<table>
... table elements here
</table>
</div>
</body>
css
body {
margin-right: 0;
padding: 0;
}
.indented-form {
margin: 10px;
}
I have "margin:10px" on the div that contains the table.
This adds a margin at the left of the page as I expect, but scrolling right, the table reaches the edge without any margin. (The div seems to be taking its width from the body, which in turn seems to be based on browser width.)
How do I make it include a margin at the right, even though the table is wider than the browser?
If you make your div an inline-block element, it will stretch to fit the table inside it:
.indented-form {
display:inline-block;
padding: 10px;
}
Example
Related
I have an angular page, home, which is comprised of 2 components and a router-outlet
<div class="home-container">
<header></header>
<sub-header></sub-header>
<router-outlet></router-outlet>
</div>
I want the home-container above to always be, at a minimum, full screen height. The header should show, then the sub-header, then the contents of the router-outlet should always fill up at least the rest of the screen (or more if there's more content of course).
Normally this is easy but it seems the router-outlet is messing it up. Example can be seen http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas , hit run and then click the "Heroes" link to route. In this example I don't want the Heroes div to be taller than the screen, and don't understand why it is.
My styles to accomplish this are. (assume router-outlet is on 'my-page')
html, body {
height: 100%;
}
.home-container {
height: 100%;
}
.my-page {
height: 100%;
}
My expectation here obviously is that home-container is full screen, shows header, shows sub-header, and that my-page then fills in at a minimum the rest of the vertical height.
What is actually happening though, is that there's a scroll bar with available height that appears equal to my header and sub-header.
This plnkr http://plnkr.co/edit/56k9ZabLAGujBoX8Lsas illustrates exactly my meaning. If you click Run and then the link for "Heroes" you will see the router-outlet contents, in this case heroes-list.component, with a green background. I do not understand why the green here is bleeding below the screen when everything is set to 100%
Update I have tried using all manner of different CSS attributes to different levels in this nesting. Including 100vh vs 100%, min-height vs height, and every combination of body/html/home-container/my-page. I have also tried the same with Angular's CSS :host, to the same result of no different
Update2 If I move it out of the element then everything behaves as you'd expect and there's no vertical scroll bar. Something about the router-outlet wrapper adds vertical space somewhere but I cannot figure out where or what is causing it.
Final Update The below answers might be useful for some applications but I ended up just solving it by giving the .my-page a specified height, just doing height: calc(100vh - $headerheight - $subheaderheight) which gets the job done
As far as I understand, 100% on a child will be equal to the size of the parents natural height. If you want to fill the space available, you really should be using flex unless you have a requirement to support IE9 and below.
I would update your Anchors to be contained in a div (or another wrapper)
<h1 class="title">Component Router</h1>
<div>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</div>
<router-outlet></router-outlet>
I would then utilize flexbox to allow the content to expand as required
.hero-list {
background-color: green;
height: 100%;
overflow:auto
}
undefined {
flex: 1;
}
body, html, my-app {
height: 100%;
}
my-app{
display: flex;
flex-flow: column;
}
Plunker to test: http://plnkr.co/edit/yE1KOZMr1pd5jQKlVYIN?p=preview
On chrome i still have scroll bars due to an 8px margin on body - this can easily be removed with CSS for a scroll free full height experience.
There are two causes that make your <body> element taller than 100% of the viewport:
Default margins of the <body> element that come from the browser's built-in styles and usually are 8px. This means that the <body> element will be as tall as the <html> element, but also will have 8px space above it and below it, causing the <html> element to overflow.
The top margin of the <h1> element "falls out" from the container due to margin collapsing. This makes the space above the <body> element equal to the default top margin of <h1> (about 21px instead of 8px).
Setting zero margin to <body> (part of ToTaTaRi's answer) helps you to solve the 1st issue. To solve the second one, you should make the <body> element or (probably better) the .my-app container establish the new Block Formatting Context. The easiest and most cross-browser way for this is setting the container overflow:hidden (other options are display:flow-root, which works for modern Chrome/Firefox, or column-count:1, which works in IE10+ and all modern browsers, you can compare nearly all the options in this live example).
First of all you should reset browser default styles at least somehow like this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Then you could achive what you want without a flex layout if prefered through splitting the page into a header section and main content section with a preset division... So lets say the heading and the links go together into a container div with i.e. a height of 20% and the main content which is at the moment hold in a tag "undefined" gets a height of 80%, if you now set the height of the app container to 100% or 100vh it should work as expected!
EDIT (because the topic is still open...):
Have you tried this css code like explained above, works like charm!?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, my-app {
height: 100%;
height: 100vh;
}
h1 , h1 + div {
height: 10%;
height: 10vh;
}
undefined {
display: block;
background-color: green;
min-height: 80%;
min-height: 80vh;
}
Problem
I have a header with the basic HTML structure
<div id="header">
<div id="logo"></div>
<div id="navigation"></div>
<div id="userInfo"></div>
<div class="headRight"></div>
<div id="callCenter" class="headRight"></div>
</div>
I cannot change the HTML. Currently it is laid out with floats, and navigation was aligned to the bottom of the header using padding-top. However, it only works when userInfo is 2 lines, and it can be 3 or 4.
What I need to do
Using only CSS, align navigation to the bottom for all nav heights while maintaining the original layout.
What I've tried
Half a dozen stack overflow solutions including the classics position:absolute and vertical-align:bottom on parent. (The former breaks the document flow, and the latter seems not to work because other elements get in the way.)
The fiddle
Cleaned fiddle best I could, but inspect will probably still be easiest.
https://jsfiddle.net/ohrhe4u5/1/
Notes:
The tabs should just touch the bottom of the header.
callCenter is misaligned in this example as well, but you can ignore. It's much lower priority.
New fiddle
I changed header, logo, and navigation to display:inline-block, allowed userInfo to float right, gave the nave extra height to make sure there's always room, and absolute positioned the headRight items.
That leaves me with this. A little janky due to the absolute positioning and forcing the nav height larger. Any better ideas?
https://jsfiddle.net/ohrhe4u5/2/
I generally dislike float for positioning where i can help it (this is a personal preference because i find it sometimes painfully unpredictable), as such, using a combination of position:absolute, min-height and margin i believe i have recreated what you're after.
Basically this solution works by position:absolute'ing the elements that we have some idea of consistent sizes of (the logo and the navigation), then have the header element take its height from the user data and links on the right. We add a min-height to the header element though so that should the user data be reduced to 2 lines, the height is still enough to accommodate the absolutely positioned elements (given they no longer affect the height of the header element by being absolute).
JSFIDDLE
CSS
/* new parts of the css */
#header {
min-height:112px; /* in case user data is made smaller */
padding:10px 10px 0 20px;
position:relative;
}
#logo {
width: 210px;
position:absolute;
top:50%;
width:210px;
height:62px;
left:20px;
margin-top:-32px;
z-index:1; /* bring logo above the user data */
}
#navigation {
position:absolute;
bottom:0;
left:210px;
font-size: 20px;
height: 40px;
z-index: 1; /* bring navigation above the user data*/
}
#userInfo table{
margin:0 0 0 auto;
}
.headRight{
text-align: right;
padding-bottom: 0.2em;
}
I have two divs on my page, the first one is a small one used to navigate, and the second one is the main content. The desired result is that they will line up side by side.
Because the main content takes up a lot of horizontal space, I want it to fill 75% of it's container, so that it will get larger or smaller depending on the screen width. Obviously this is a simple width:75% in CSS but when I do this, the main content div refuses to align to the right of the navigation div. However, if the div at 75% was taking up 400px and I changed the width:75% to width:450px then the divs align exactly how I want them to, despite being the same size. When I look at the box model for the main content div I can see the content is 75% as it is supposed to be, but there is a margin on the right of it which takes up the rest of the container. I have tried setting it to margin-right: 0px; but it doesn't change at all and the margin is still there.
The only CSS I have defined for this is:
#mainArea_pnlErrorLog {
width: 50%;
position: relative;
margin-right:0px;
}
Setting position:absolute; fixes the problem however it creates a new one, because the container will not vertically expand to fit the main content and it goes outside of the container
Here's a screenshot of the web page to better illustrate the problem:
!1
You problem is that, in your HTML code, you've got two nested <div>s styled with display: inline-block:
<div id="mainArea_pnlControls">
<div id="mainArea_pnlErrorLog">
...lots of content here...
</div>
</div>
#wrapper {
width: 420px; /* fix surrounding element width */
padding: 10px;
background: #ddd; /* gray */
}
#controlsList {
display:inline-block;
width:145px;
height:50px;
background: #faa; /* red */
}
#mainArea_pnlControls {
display:inline-block;
vertical-align:top;
background: #afa; /* green */
}
#mainArea_pnlErrorLog {
width: 50%; /* set to 200px to see intended rendering */
position: relative;
background: #aaf; /* blue */
}
<div id="wrapper">
<div id="controlsList">
SIDEBAR
</div>
<div id="mainArea_pnlControls">
<div id="mainArea_pnlErrorLog">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
</div>
</div>
The outer one, mainArea_pnlControls, has no explicit width defined in the CSS, so it expands as necessary to accommodate its content. When you give the inner one a width: 50%, you tell the layout engine to make the inner <div> half as wide as the outer one.
This is kind of confusing for the layout engine. On one hand, by using display: inline-block for the outer div, and not specifying an explicit height, you've implicitly told the browser to make it as wide as the inner div inside it. On the other hand, by specifying width: 50% for the inner div, you told the browser to make it only half as wide as the outer div.
Obviously, these requirement conflict (at least unless both divs have zero width), so one of them has to fail.
Firefox, at least, chooses to fail the implicit requirement of equal width, and instead to make the inner div half as wide as the outer one, to honor the explicit width: 50% requirement. But that still leaves open the question of exactly how wide should the outer div be in the first place. Since it's an inline block, it shouldn't be wider than the block enclosing it (unless it's forced to overflow its container), but the only lower bound on its width is that it needs to accommodate its content. But in this case, the content will always shrink to be narrower than the outer block, so... there's just no meaningful lower bound available there.
Apparently, what Firefox ends up doing is (something like) this:
Figuring out how wide the content of the inner div would be, if it could expand freely to be as wide as it wants.
Set the width of the outer div to be the minimum of the width the content "wants" and the width of the enclosing block.
Set the width of the inner div to be 50% of that.
Render the content of the inner div at that width (which guarantees that it will either wrap or overflow).
You can see the effect clearly if you make the content narrower, so that it would actually fit cleanly on one line: it will still wrap, since the inner div ends up being exactly half as wide as it needs to be to accommodate it, as in the snippet below:
#outer {
display:inline-block;
background: #afa; /* green */
}
#inner {
width: 50%;
background: #aaf; /* blue */
}
<div id="outer">
<div id="inner">
BLAH BLAH BLAH BLAH BLAH BLAH
</div>
</div>
Anyway, the solution is simple: don't do that. Either get rid of one of the nested divs entirely, or just set the width: attribute on the outer one, not the inner one.
In css when i give my div height a percentage value the div completely disappears, heres what im doing
<html>
...
...
<div id="logcontainer">
<div><div>
<div></div>
</div>
this is not the actual html but it sums up what im trying to do, heres my CSS
#logcontainer {
width:100%;
min-height:100%;
margin: 0px;
padding: 0px;
background-color: #7f7f7f;
}
whenever the height has a percentage value the div disappears, the width works but no height?, when I use ems or rem it works perfectly, any ideas?
I think all you need is html, body { height: 100% }, if i'm understanding your question correct
Set height of body 100%, then it will work. Since you need to set a 100% height on your parent element, in this case your body. The div tag is a container, but it is contained in the body tag... the body tag, unfortunately is not treated the same on all browsers... in some it is sized to fit the browser's available space... in some browsers the body tag is sized to fit the minimum height required to fit the current contents.... So a div tag set to 100% would size differently on each...in fact if empty, the div tag might not even show up on some browsers, since an empty body would be, potentially, 0px high...
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100%
but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
enter link description here
I have a gridview that has some 20 columns and 1000 rows. The grid is placed under <div> tag. Due to such large figures, the div shows the vertical scrollbars, which is fine but it doesn't show the horizontal scrollbar.
The css written for div is as;
.divCSS{
display:block;
position:relative;
width: auto;
height: 5em;
margin:0;
padding:5px;
background:inherit;
color:inherit;
overflow:auto;
}
The entire <div> code is as below;
<div id="divGrid" align="left" style="border: solid 1px gray; width: 790px; height: 420px;" class="divCSS">
Despite giving overflow:auto, why i don't see a horizontal scrollbar?
If you have a fixed with and have set your overflow to auto then, to quote the W3C:
The behavior of the 'auto' value is user agent-dependent, but should
cause a scrolling mechanism to be provided for overflowing boxes.
In other words, your scroll behaviour may vary depending on the browser. Given you've defined both a fixed height and width, your browser will wrap your text so that it doesn't impact adjacent elements and does the minimum to ensure it merely supports a visible scrolling mechanism to display such that users could access the clipped content.
If you want to see the horizontal scroll bars, you need to include content length that cannot wrap and exceeds your specified element width, such as an image or by specifying white-space: nowrap on one of your contained elements (e.g. a paragraph).
Have a look at this example for an illustration of how it works.
Give the width of the div specific and set overflow-x:visible;
REmove
width: auto;
height: 5em;
from your divCSS class
and for scroll to apper you need content width more than 790px and hight more than 420px.
try
{
overflow-x:scroll;
overflow-y:scroll;
}