I have a list that I'm styling like a table, so that the contents are horizontally aligned. The first column contains labels, and the second contains groups of buttons using Bootstrap's btn-group-justified class - which is also using display: table, so it's effectively a nested table.
The problem is that there is extra space added above the contents of the first cell and below the contents of the second, shown here in blue:
Here is the HTML:
<ol class="table-list">
<li>
<div>
<span>Row 1</span>
</div>
<div>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">Option A</button>
</div>
<div class="btn-group">
<button class="btn btn-default">Option B</button>
</div>
</div>
</div>
</li>
</ol>
And the stylesheet:
ol.table-list {
display: table;
list-style: none;
padding: 0;
border-collapse: collapse;
}
ol.table-list > li {
display: table-row;
}
ol.table-list > li > div {
display: table-cell;
}
ol.table-list > li > div > span {
display: inline-block;
white-space: nowrap;
background: white;
padding: 6px 12px;
line-height: 20px;
margin: 0;
}
This happens in both Firefox and Chrome. When I inspect the cells and their contents, there is no relevant margin and no padding. How can I get rid of that space?
Demo in Plunker
Hmm, it turns out I can fix it by setting the table-cell's vertical-align to anything other than baseline.
ol.table-list > li > div {
display: table-cell;
vertical-align: middle;
}
Related
This is pretty basic CSS question. I have this as my result:
I want the name and date to be on a single line next to the menu icon
HTML:
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div class="topline">
<div id="name">John Doe</div>
<div id="date">04/27/2018</div></div>
</div>
CSS:
.topnav{
background-color: #3071a9;
color: #ffffff;
}
.topline{
padding-left: 20px;
}
#name {
float:left;
}
#date {
float:left;
}
add to your CSS :
.topline{
display: inline-block;
}
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
This needs to be made into a div and floated left like your name and date are. You also need topnav to be of the right width (whether it's fixed or not) for everything to fit inside, otherwise it'll be pushed down.
<div style="font-size:30px;cursor:pointer;float:left;" onclick="openNav()">☰</div>
You could keep it a span by using display:inline or inline-block, but since you're floating the other divs, might as well keep it consistent. Display in CSS
Stop all the floating! Use flexbox instead:
.topnav {
display: flex;
align-items: center;
background-color: #3071a9;
color: #ffffff;
}
#name,
#date {
margin-left: 20px;
}
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div id="name">John Doe</div>
<div id="date">04/27/2018</div>
</div>
</div>
So I have two divs that contain text and I want to have them horizontally. I tried using the property display: inline-block but it doesn't seem to work.
Here is a jsfiddle of my attempt.
I think what you want to use is a ul instead of divs and that will allow you to have them all on the same line, if thats what you meant?
.row{
list-style: none;
}
.row li{
display: inline-block;
padding: 0 10px;
}
<ul class="row">
<li>A108 Adam Street</li>
<li>New York, NY 535022</li>
<li>info#exmaple.com</li>
</ul>
I think this is what you are trying for:
.text{
display: inline-block
}
.text1{
float: left;
}
.text2{
float: right;
}
<div >
<div class="ion-ios-location-outline text text1">
<i><p>A108 Adam Street<br>New York, NY 535022</p></i>
</div>
<div class="ion-ios-email-outline text text2">
<i><p>info#example.com</p></i>
</div>
</div>
If correct, you can reply for further explaination
Default of div is display: block; it makes the div get full width of page. So if you want to make 2 divs stay horizontally. You should set display of div to inline-block;
div {
display: inline-block;
}
.text{
display: inline-block
}
.text1{
float: left;
}
.text2{
float: right;
}
Just give the parent div a class and apply text-align:center property
.parent{
text-align:center;
}
<div class='parent'>
<div >
<i class="ion-ios-location-outline "></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div>
<i class="ion-ios-email-outlinetext " ></i>
<p>info#example.com</p>
</div>
</div>
A div by default has its display attribute set to "block". So even if you are setting the display property of of its child tag, to "inline-block", that would not work.
Setting the parent divs to "inline-block" instead is probably what you need.
Here is the code for your reference (You do not need text, text1 and text2 classes. I've named the class you require as "display-inline-block")
<div>
<div class="display-inline-block">
<i class="ion-ios-location-outline"></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div class="display-inline-block">
<i class="ion-ios-email-outline"></i>
<p>info#example.com</p>
</div>
</div>
And the following css
.display-inline-block {
display: inline-block;
}
P.S. You can also use the bootstrap css class "d-inline-block" instead, if you are using bootstrap in your project, rather than defining the custom class "display-inline-block".
Use of float Property :
.text {
display: inline-block
}
.text1 {
float: left;
}
.text2 {
float: right;
}
div div:last-child {
float:right;
}
div div:first-child {
float: left;
}
<div >
<div>
<i class="ion-ios-location-outline text text1"></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div>
<i class="ion-ios-email-outlinetext text2" ></i>
<p>info#example.com</p>
</div>
</div>
Im using bootstrap grid to build a responsive menu and a section that has a search form.But I dont understand why there are some issues in the layout relative to margins and paddings as you can see here: http://jsfiddle.net/ya08jsfy/1/.
In the header area the logo h1 is not aligned vertically at center.
Then there is a white space between the header area and the search section, do you know why? Adding some padding to the .Search div seems to solve this, but why the padding is needed? Why the .Search div by default dont appears next to the header?
Then in the search form I want the input next to the button wihout any space but its not working and also, even with box-sizing:border-box, the input is not occupying the full width because the yellow background appears.
Do you know how to fix this in a way that work in another sections so the content is aligned at center with the same padding in all sections.
html:
<header>
<div class="container">
<div class="row">
<div class="header_nav">
<div class="col-xs-6 col-sm-3">
<h1 class="header__logo">Logo</h1>
</div>
<div class="col-xs-6 col-sm-9">
<a class="nav_mobile_btn hidden-sm hidden-md hidden-lg"><i class="fa fa-bars" aria-hidden="true"></i></a>
<ul class="nav hidden-xs">
<li class="nav__item">Item 1</li>
<li class="nav__item">Item 2</li>
<li class="nav__item">Item 3</li>
<li class="nav__item">Item 1</li>
<li class="nav__item"> Item 4</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section class="Search">
<h1>Search</h1>
<form action="/signup" method="post">
<div class="row">
<p class="col-xs-10" style=background:yellow;>
<input type="text" name="first_name">
</p>
<p class="col-xs-2">
<button type="submit">Search</button>
</p>
</div>
</form>
</section>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input,textarea,select{
display: block;
padding: 15px;
width: 100%;
outline: 0;
border: 0;
}
header{
border-bottom: 1px solid red;
background-color:orange;
}
.header_nav {
display: flex;
align-items: center;
}
.header__logo{
color:green;
}
.nav {
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav__item {
padding: 0 15px;
a {
font-weight: 600;
font-size: em(15px);
color: brown;
&:hover {
text-decoration: none;
}
}
&:last-of-type{
padding-right: 0;
}
}
.nav_mobile_btn{
font-size: em(30px);
color:$greypp;
float: right;
}
.Search{
background-color: green;
h1{
color: #fff;
text-align: center;
font-size: 1em;
}
}
button{padding:15px;}
Bootstrap css comes with some default margins and paddings to tags like h1 to h6 and p. In your case h1 has a margin top of 20px and bottom of 10px thats why logo is not vertically aligned. You can set headings and paragraphs margin to 0 and override bootstrap styles.
For proper alignment and sizing of buttons inside inputs use this code instead.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
It causes that h1(Logo) to have a different margin on top and bottom. The solution is simple, just set the same margin for both.
h1{
margin-top:0px;
margin-bottom:0px
}
The gap between header area and search section comes from the margin of h1(Search). The solution is to set the margin of that h1(Search) to zero.
h1{
margin-top:0px;
}
It causes bootstrap to set every column to have a padding of 15px on both left and right side. The solution is to override bootstrap style:
[class*="col-"]{
padding:0px;
If you don't want to override all bootstrap columns, create your own class then.
I have this header bar.
<div id="header">
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
</div>
I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?
Here's my CSS
#header {
background-color: #323C3E;
width:100%;
}
.button {
padding:22px;
}
.orange {
background-color: #FF5A0B;
}
.red {
background-color: #FF0000;
}
.inline {
display:inline;
}
#searchBar {
background-color: #FFF2BC;
}
Use calc!
https://jsbin.com/wehixalome/edit?html,css,output
HTML:
<div class="left">
100 px wide!
</div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
Fills width!
</div>
CSS:
.left {
display: inline-block;
width: 100px;
background: red;
color: white;
}
.right {
display: inline-block;
width: calc(100% - 100px);
background: blue;
color: white;
}
Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.
You can realize this layout using CSS table-cells.
Modify your HTML slightly as follows:
<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>
Just remove the wrapper element around the two .button elements.
Apply the following CSS:
#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}
#searchBar input {
width: 100%;
}
.button {
white-space: nowrap;
padding:22px;
}
Apply display: table to .container and give it 100% width.
For .logoBar, #searchBar, .button, apply display: table-cell.
For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
Use text-align and vertical-align in the table cells as needed.
See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/
I know its quite late to answer this, but I guess it will help anyone ahead.
Well using CSS3 FlexBox. It can be acheived.
Make you header as display:flex and divide its entire width into 3 parts. In the first part I have placed the logo, the searchbar in second part and buttons container in last part.
apply justify-content: space-between to the header container and flex-grow:1 to the searchbar.
That's it. The sample code is below.
#header {
background-color: #323C3E;
justify-content: space-between;
display: flex;
}
#searchBar, img{
align-self: center;
}
#searchBar{
flex-grow:1;
background-color: orange;
padding: 10px;
}
#searchBar input {
width: 100%;
}
.button {
padding: 22px;
}
.buttonsHolder{
display:flex;
}
<div id="header" class="d-flex justify-content-between">
<img src="img/logo.png" />
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width.
This takes the image out of the "flow" which means that any items rendered in normal flow will not adjust their positioning to take account of this.
To make the "in flow" searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter.
The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar.
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
</div>
and the css
.container {
width: 100%;
}
.container img {
width: 50px;
float: left;
}
.searchBar {
padding-left: 60px;
}
in css:
width: -webkit-fill-available
I would probably do something along the lines of
<div id='search-logo-bar'><input type='text'/></div>
with css
div#search-logo-bar {
padding-left:10%;
background:#333 url(logo.png) no-repeat left center;
background-size:10%;
}
input[type='text'] {
display:block;
width:100%;
}
DEMO
http://jsfiddle.net/5MHnt/
Include your image in the searchBar div, it will do the task for you
<div id="searchBar">
<img src="img/logo.png" />
<input type="text" />
</div>
I did a quick experiment after looking at a number of potential solutions all over the place. This is what I ended up with:
http://jsbin.com/hapelawake
I'm experiencing some strange behavior with OL numbering in Chrome, here's my markup:
<ol>
<li>
<div class="block left">
<span class="block">Main Title<span class="alert">!</span></span>
<input type='text' name='title-1' />
</div>
<div class="block left">
<span class="block">Subtitle<span class="alert">!</span></span>
<input type='text' name='title-2' />
</div>
<div class="block left">
<span class="block">Add Image<span class="alert">!</span></span>
<input type='file' name='image' size='30' />
</div>
</li>
<ol>
The classes used are:
.block { display:block; }
.left { float:left; }
.alert { color:red; }
The problem I'm having is that I need the number of my OL to appear to the LEFT of the LI's contents, but Chrome seems to attribute some kind of float property to the numbers, making it appear on the right.
Can anyone provide any assistance on this matter? Thanks in advance.
ol li { margin-left: 60px; list-style-type: decimal; }
will make the numbers visible.
Wrapping the tags inside li-elements with <div class="wrap"> and apply this css to it:
.wrap { display: inline-block; position: relative; top: 12px; }
will fix your problem --> http://jsfiddle.net/GpfYk/2/
position: relative; top: 12px; makes the position nicer.
The problem is that you have a span with a class of "block" inside the li, and both are being floated. If you remove the class of block from the span, it should fix the issue.
Or, if you wish to keep the elements inline, try setting them to display: inline-block and remove the "left" class to float them as in this example: http://jsfiddle.net/jglovier/zshPr/