I have a parent container, with several child containers. Here is the styling of each:
#media print {
#par-container {
width: 100% !important;
position: absolute !important;
top: -10px !important;
left: -25px !important;
margin-left: 5px !important;
margin-right: 5px !important;
}
}
--
.child-container {
margin-top: 50px;
width: 100%;
border: solid;
border-color: grey;
border-radius: 5px;
border-radius: 5px;
display: block;
}
--
<div id="par-container">
<div className="child-container">stuff1</div>
<div className="child-container">stuff2</div>
<div className="child-container">stuff3</div>
<div className="child-container">stuff4</div>
</div>
When I try to print the document, the text inside of the child container overflows the height of the child container, by overflowing the bottom of the container.
Because I used width: 100% !important in par-container, there is no overflow beyond the width. That is fine.
I wish I could show a screenshot of it, but I cannot due to privacy.
This is the solution I can provide from what I understood from your question.
#media print {
#par-container {
width: 100% ;
position: absolute ;
padding: 0 20px;
display: flex;
flex-direction: column;
}
}
.child-container {
margin-top: 50px;
width: 100%;
border: 2px solid grey;
border-radius: 5px;
}
<div id="par-container">
<div class="child-container">stuff1</div>
<div class="child-container">stuff2</div>
<div class="child-container">stuff3</div>
<div class="child-container">stuff4</div>
</div>
your page will be owerflow from top of page in print because of your top -10px code in #par-container
if you remove this code its will be fix and i recommend give a
width 90 or 95% when its have to print because the printed pages are smaller
.child-container {
> margin-top: 50px;
> width: 100%;
> border:5px solid gray;
> border-radius: 5px;
> }
>
> #media print {
> #par-container {
> width: 100%;
> position: absolute;
> top: -10px;
> /* left: -25px; */
> margin-left: 5px;
> margin-right: 5px;
> }
> .child-container {
> width: 90%;
> }
> }
like this ?
Related
I want to center the text "name" horizontally and vertically inside the div "firstquad". I want the div to have 100% width and 25% height. But the div has much more than 100% width. For the text, I have set the top and left as 50%. The text should be centered and the div should fit the page horizontally but its like this. Any help?
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
text-align: center;
background-color: blue;
}
#name {
position: relative;
top: 50%;
left: 50%;
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Both div and h1 are block level elements by themselves.
Block level elements behave in such a way that
they create a line break before and after themselves
they grab as much horizontal space as they can get
Which means that with <div><h1></h1></div> you have a div that grabs as much horizontal space as available (full page width). Inside it, the h1 behaves the same, consuming all horizontal space that the surrounding div allows.
Now with position: relative; left: 50%; you do not change the width of the h1 - you simply change the position, where its rendering starts. Obviously, this leads to the h1 moving partly outside the div. Add borders so you understand:
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; }
<div><h1>Test</h1></div>
Now move the h1 (only slightly, so the effect is visible better):
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; position: relative; left: 20px; }
<div><h1>Test</h1></div>
css:
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
#name {
color: white;
}
body {
margin: 0%;
height: 100%;
background-color: cornsilk;
}
#firstquad {
height: 25%;
background-color: blue;
text-align: center;
}
#name {
color: white;
margin: 0;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Is this what you are looking for?
Just change #name to #name {
color: white;
}
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 50%;
text-align: center;
background-color: blue !important;
}
#name {
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
I'm using this grid as a top navabar and I want to make a few alterations:
How can I reduce the width of the input to 40% but still keep it right next to the logo? And how can I add a sign-in div at the right hand corner. But keep in mind that I want the entire header to remain responsive like it is now. If I do the following it looks good in a full screen but when the width of the screen is smaller the input becomes really small.
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 40%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div
</div>
</div>
You can either reduce the value of 40% in your CSS.
Or add new CSS for max-width:
.header > form > input {
max-width: 50px;
}
For your sign-in div, you can add this CSS:
.float-right {
float:right;
}
However your current class spells floar and not float, you should change that.
you can use this code
body {
margin: 0;
padding: 0;
}
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 24%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div>
</div>
</div>
I'm trying to acomplish this:
This is my code:
In the view I add this to the title:
<ion-nav-title>
<div class="progress">
<div class="active"><div>Selección</div></div>
<div><div>Destino</div></div>
<div><div>Pago</div></div>
</div>
</ion-nav-title>
And I use this css:
.bar {
height: 60px !important;
}
.has-header {
top: 60px !important;
}
.progress {
line-height: 4;
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
.progress > div {
display: table-cell;
}
.progress > div > div {
color: #ddd;
border-top: 2px solid #ddd;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
margin-left: 5px;
margin-right: 5px;
font-size: 50%;
text-transform: uppercase;
font-weight: normal;
}
.progress > div.active > div {
color: #fff;
border-top-color: #fff;
}
You can play with this in codepen (please fork):
http://codepen.io/anon/pen/NqLvMN
But I get this:
And if I change the .progress > div > div display to inline I get this:
Help!
Depending on the first image, I have made the following
CSS changes
.progress > div {
display: inline-block; /* Horizontal alignment */
line-height: 15px; /* Vertical alignment */
width: 33%; /* Equal width 3 columns */
}
Updated Codepen
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
I have the following structure:
<div class="wrap">
<div class="menu">
<div class="item">
Menu
<div class="submenu">
<div class="submenuitem">Submenu</div>
</div>
</div>
</div>
</div>
and so far the following CSS:
div.wrap {
background: #eee;
height: 80px;
}
div.menu {
margin-left: 50px;
background: #36e;
}
div.item {
background: #d00;
color: #fff;
line-height: 40px;
padding: 0px 20px;
font-size: 16px;
display: inline-block;
margin-left: 50px;
}
div.item:hover {
background: #b00;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0%;
top: 50%;
min-width: 300px;
}
div.item:hover div.submenu {
display: inline-block;
}
div.submenuitem {
line-height: 40px;
padding: 0px 20px;
background: #b00;
color: #fff;
display: inline-block;
}
JSFiddle
The behaviour I'm after is that the width of submenuitem expands to fit its textual content, but that it can use at most the width of wrap for expanding. It should also be positioned directly under item unless the width of submenuitem will be larger than the distance from its original position to the right end of wrap. Thereafter it should expand to the left until it meets the left edge of wrap.
As you can see this succeeds perfectly when I can know the distance from submenuitem's original position to the right end of wrap by setting right: 0%; min-width: 300px; on submenuitem, but I want to do this in a way that doesn't require knowing that distance.
I have been trying to craft or find a solution to this for the past few days and have not managed to get any closer. Is it even possible with pure CSS to begin with?
Is this something you want? check this one nd let me know.
http://jsfiddle.net/zmcEC/9/
div.wrap {
width: 400px;
background: #eee;
position: relative;
height: 80px;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0;
top: 40px;
left:0;
}