Need tabs to shrink while the main container doesn't fit all items by width.
Here is expected behavior:
http://adamschwartz.co/chrome-tabs/
But could it be done on pure css, flexbox may be?
Solution was pretty simple. Just display: flex; for container, and overflow: hidden; for tab items.
Don't know why my question was downvoted. :(
html {
font-family: sans-serif;
}
.container {
display: flex;
border: 1px solid silver;
padding: 10px 10px 0;
width: 400px;
margin: 0 auto 10px;
}
.tab {
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
border: 1px solid silver;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 10px;
margin-right: 8px;
border-bottom: none;
}
.tab:last-child {
margin-right: 0;
}
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
<div class="tab">Stackoverflow</div>
</div>
I have some questions about this code.
The first inputtxt class element is a simple inline-block display. Last two inputtxt class elements are input text field. Why they show different? Does input text field has default padding? Why the vertical align referring to gray div is different?
All inputtxt class elements have some top and bottom gap distances to previous and following lines. Why?
Thank you so much!
.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block;
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}
<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
When the div height is smaller than div line-height the browser fits the next elements based on line-height setting by default, this just happen when element is inline-block. To fix it just add a line-height property to the element parent.
Also you can set .inputtxt padding to 0, removing input default padding.
.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block;
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}
.formitm {
line-height: 10px; /*less or equal than inline-block child*/
}
<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
Add the following style to your .inputtxt
padding: 0;
vertical-align: top;
First look at the picture:
Like you see my center of page i mean this content with form on small resolution get over the navbar. This content is centered verticaly and horizontal by flex.
here is code and what i try:
html`
<nav>
<div class='row header-inner'>
<div class='col-md-10 col-lg-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-11 col-xs-12'>
<div class='row logo-inner'>
<img src="assets\static\Logo.png">
</div>
<div class='row menu-inner'>
<a class='menu-item' routerLink="/aboutUs" routerLinkActive="active">about us</a>
<a class='menu-item' routerLink="/skiCams" routerLinkActive="active">skicams</a>
<a class='menu-item' routerLink="/contactUs" routerLinkActive="active">contact</a>
</div>
</div>
</div>
</nav>
<div class='row content-inner'>
<div class='col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-10 col-xs-12'>
<router-outlet></router-outlet>
</div>
</div>
<footer>
<div class='row center-block'>
<div class='col-md-offset-5 col-lg-offset-5 col-md-2 col-lg-2 col-sm-offset-5 col-sm-2 col-xs-offset-3 col-xs-6 footer-content'>
Powered by PGS
</div>
</div>
</footer>`
and css
footer {
border-top: 1px solid #40637e;
background-color: #282828;
position: fixed;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
.footer-content{
color :#959595;
border-top :1px solid #959595;
text-align: center;
margin-top:30px;
padding: 20px;
font-size: 10px;
}
.logo-inner{
margin: 35px 0px 35px 0px;
}
.header-inner{
border-bottom:1px solid #dbdbdb;
padding-bottom: 13px;
margin: 0;
}
.menu-inner{
margin:0px;
}
.menu-item{
margin-right: 40px;
padding-bottom: 15px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
color:#545454;
}
.active{
border-bottom:1px solid #ef6716;
color: #ef6716;
}
a:hover, a:focus {
color: #ef6716;
text-decoration: none;
}
.content-inner{
background-color:#f8f8f8;
margin: 0;
/*margin-bottom:200px;*/
}
#media(max-width : 768px){
.menu-item{
margin-right:30px;
padding-bottom: 14px;
font-size: 14px;
text-transform: uppercase;
}
.menu-inner{
margin:0px;
text-align: center;
}
.logo-inner{
margin: 35px 0px 35px 0px;
text-align: center;
}
}
could you help my do something like this when the height is smaller the page start scrolling ?
It looks like you're missing your flexbox code in your question. Without seeing it all, I'd suggest trying to remove flexbox in the smaller breakpoints and just using display: block; and making sure your <div class='row content-inner'> element is statically positioned (position: static;).
Why height text box is less than button?
My Code :
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size: 20px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
The <input> element, is one of the replaced elements, and In CSS, a replaced element is an element whose representation is outside the scope of CSS. It has some special styles from browser user agent stylesheet, and they don't get inherited by default, such as font-family, font-size, line-height etc., and those rules can determine a box's height.
You can force them to get inherited by setting <property>: inherit;, so that the <input type="text"> can inherit those styles from <div class="t"> and its parent <div id="container"> etc., so it will be able to get the same style as the <div id="but">, in order to make them the same height.
You can set those specific styles on the input box directly, but using inherit can prevent from overriding rules.
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.txt,
#but {
border: 1px solid #999;
padding: 10px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
In addition, you will use a <button> tag instead of <div> button in the real case I think. To make the input field and button the same height, you will also need to set the same padding values for them directly.
#container {
font-size: 20px;
overflow: auto;
}
.t,
#but {
float: left;
}
.txt,
#but {
font-family: inherit;
font-size: inherit;
line-height: inherit;
border: 1px solid #999;
padding: 10px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<button id="but"><span>Search</span></button>
</div>
Browser handles difference html element and attribute differently i check it computed tab in chrome developer tool and find out input field render height differently 1 px more in top and bottom so its 2 px actual height you set.
these line will fix your problem, check the snippet for how to apply them.
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,#but {
float: left;
}
#but ,.txt {
border: 1px solid #999;
padding: 10px;
font-size:16px;
line-height:16px;
height:16px;
font-family:sans-serif;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="" placeholder="write a name" />
</div>
<div id="but"><span>Search</span></div>
</div>
/You'll need to do something like this although there is likely to be some differences across systems./
.searchtext {
border:1px solid #000;
border-right:none;
padding:4px;
margin:0px;
float:left;
height:16px;
overflow:hidden;
line-height:16px;
}
.searchbutton {
border:1px solid #000;
background:#fd0;
vertical-align:top;
padding:4px;
margin:0;
float:left;
height:26px;
overflow:hidden;
width:5em;
text-align:center;
line-height:16px;
}
Try giving font-size to all your elements, they will become of equal height.
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
The problem is your font-size.
Please try to give font-size to all your elements like in the following fiddle:
#container {
overflow: auto;
line-height: 100%;
border: 1px solid red;
}
.t,
#but {
float: left;
}
#but,
.txt {
border: 1px solid #999;
padding: 10px;
font-size: 14px;
}
<div id="container">
<div class="t">
<input type="text" class="txt" name="">
</div>
<div id="but"><span>Search</span></div>
</div>
This is not valid selector:
line-height: 100%;
You have to define height to container, or wrap your inner content with:
.container .wrap{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
And then set height: 100% to your #but element.
i have the following set up
HTML
<div id="wrap">
<div id="box1" class="list"></div>
<div id="box2" class="list"></div>
<div id="box3" class="list"></div>
<div id="box4" class="list"></div>
<div id="box5" class="list"></div>
<div id="box6" class="list"></div>
<div id="box5" class="list"></div>
<div id="box3" class="list"></div>
<div id="box1" class="list"></div>
<div id="box4" class="list"></div>
<div id="box6" class="list"></div>
<div id="box2" class="list"></div>
</div>
CSS
#wrap{margin: 0 auto; text-align: center; vertical-align: middle; border: 1px solid #000000;}
.list{display: inline-block;margin: 0px 10px;}
#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}
fiddle
each <div class="list"> actually would hold a single image but for the purpose of this i set the widths and heights to be that of the divs high if the images were there. and yes i am away of the duplicate ids but in reality these divs wont have ids, just the class.
anyway i am trying to get these divs to vertically align for each line. the vertical align needs to be dynamic to the point that if the tallest box (ie. #box3) is removed from a line (because of the re-sizing window moved it to a different line or it was removed all together from HTML) the line should adjust accordingly (ge. if #box3 and #box5 were on the same line where other lines almost touch #box3 border, when all #box3 is removed the other lines should now almost touch #box5 border)
As you can see i am already using vertical align with no avail. so what other CSS do i need?
Just set vertical-align to the elements themselves instead of the wrapper.
CSS
#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; }
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}
See DEMO
You could use flexbox to achieve the desired result if you are okay with current browser support for flexbox.
Using flexbox provides the ability to evently distribute your images horizontally in each row and align them at their vertical centers.
/* Flex container */
.container{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
/* Each div inside container */
.container div{
align-self: center;
margin:20px;
}
#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}
<div class="container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box5"></div>
<div id="box3"></div>
<div id="box1"></div>
<div id="box4"></div>
<div id="box6"></div>
<div id="box2"></div>
</div>
#wrap{
margin: 0 auto;
text-align: center;
border: 1px solid #000000;
}
.list{
display: inline-block;
margin: 0px 10px;
vartical-align: middle;
}
please try to vartical-align middle in .list class....
is this work?