While implementing custom checkbox I came across the problem of vertical aligning one-line and two-lines text next to the image which imitates checkbox with one css style.
See the described situation in this image.
I have played a lot with vertical-aling, display: inline-block and line-height, the solutions occured to work separetely only for one-line text or only for two and more lines text. In the end I figured out that the behavior can be reached by display: table and display: table-cell. But I'the sample onnot happy with this solution.
Is there any other way to reach the same behavior?
Here is the sample html to play with:
<div class="block">
<label class="checkbox">
<input class="input" type="checkbox">
<span class="image"></span>
<span class="text">Some text</span>
</label>
</div>
<div class="block">
<label class="checkbox">
<input class="input" type="checkbox">
<span class="image"></span>
<span class="text">Some very very very <br> very very very long text</span>
</label>
</div>
And here is the display: table-cell style solution:
.block {
margin-top: 10px
}
.checkbox {
display: table;
}
.checkbox .input {
display: none;
}
.image {
background: red;
width: 35px;
height: 35px;
display: table-cell;
vertical-align: middle;
}
.text {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
}
See the same on fiddler.
I tried like this http://jsfiddle.net/StartStep/79T6d/2/
SEE ON JSFIDDLE http://jsfiddle.net/StartStep/79T6d/2/
Related
This is what I wish to achieve: display a message next to an input box.
However, when the message is too long the whole thing goes under the input box.
css
.data-form{
display: block;
box-sizing: border-box;
line-height: 22.8px;
}
.data {
box-sizing: border-box;
display: inline-block;
}
.form-group {
margin-bottom: 15px;
// box-sizing: border-box;
}
.data-status {
display: inline-block;
color: red;
word-wrap:break-word;
}
.data-label {
display: inline-block;
}
.form-control {
width:200px;
font-size: 16px;
}
html markup
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<form class='data-form'>
<div class='data form-group row'>
<label class='data-label'>
<span> Add a data code </span>
<input type='text' name='data' class='form-control'>
<div class='data-status'>
<span class='data-status'>TEST </span>
</div>
</label>
</div>
</form>
</div>
I want to keep the whole error message to the right hand side of the input regardless of the length of error text
I have tried
'break-word'
various different structure such as moving the message inside a div which sits at the same level of label.
Unfortunately they do not work.
Here is the code that demonstrated the problem
http://jsfiddle.net/kongakong/o338t791/3/
Any suggestion? It uses bootstrap css
Just change the .data-status rule to this to remove the inline-block:
.data-status {
color: red;
word-wrap:break-word;
}
Here is a fiddle which shows it in action
The inline-block rule is whats forcing the element to remain in a single line. You can also change it to display:inline; but this is the default rule for a span element.
do some changes in your html code as
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<form class="data-form">
<div class="data form-group row">
<label class="data-label">
<div> Add a data code </div>
<div class="data-status">
<input class="form-control" type="text" name="data">
</div>
<span class="data-status">TEST TEST TEST TEST TEST </span>
</label>
</div>
</form>
</div>
and in your stysheet put
.data-status
{
vertical-align: middle;
}
In the form-control, add a display-inline.
.form-control {
width:200px;
font-size: 16px;
display:inline;
}
Data status as,
.data-status {
display: inline;
color: red;
word-wrap: break-word;
}
Default comes with form-control is display:block.
This will make span and input inline. Wrap the "Add a data code" within a div.
Here is the complete html and css,
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<form class='data-form'>
<div class='data form-group row'>
<label class='data-label'>
<div>
<span> Add a data code </span>
</div>
<input type='text' name='data' class='form-control'>
<div class='data-status'>
<span class='data-status'>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</label>
</div>
</form>
</div>
CSS;
.data-form{
display: block;
box-sizing: border-box;
line-height: 22.8px;
}
.data {
box-sizing: border-box;
display: inline-block;
}
.form-group {
margin-bottom: 15px;
box-sizing: border-box;
}
.data-status {
display: inline;
color: red;
word-wrap:break-word;
}
.data-label {
display: inline-block;
}
.form-control {
width:200px;
font-size: 16px;
display:inline;
}
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 am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:
_____________ _______________
| input 1 | | button 1 |
|___________| |_____________|
_______________
| button 2 |
|_____________|
I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:
<div>
<input type="text">
<button>Action 1</button>
</div>
Please see my jsfiddle here. Why is this happening and what's the correct solution?
You need thee div container to do this as shown in this jsFiddle.
HTML Code
<div class="container">
<div class="left">
<button>
</div>
<div class="right">
<button>
</div>
</div>
CSS Code
.container {
width: 190px;
height: 22px;
margin: 0;
}
.left {
float: left;
width: 95px;
height: 22px;
}
.right {
float: right;
width: 95px;
height: 22px;
}
Use rows.
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 1">
</div>
</div>
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 2">
</div>
</div>
With the following styling.
div.row-rap {
width: 100%;
}
div.row-rap .right, div.row-rap .left {
width: 50%;
float: left;
}
Here's an alternative, the margins and colors may need modification. See jsfiddle link for sample result.
It has a left-aligned label and right-aligned input (button style) in a div, for each line. The non-breaking space is needed as a placeholder in the span element that represents an "empty label".
http://jsfiddle.net/qallar/kfgCb/5/
The html is:
<div class='line'>
<span class='formlabel'>label 1</span>
<input class='formbutton' type='button' value='button 1 text ' />
</div>
<div class='line'>
<span class='formlabel'> </span>
<input class='formbutton' type='button' value='button 2 text' />
</div>
and the css:
.line
{
display: block;
background-color: #ddd; /* also try #fff */
margin: 0px;
padding: 2px;
height: 30px;
width: 200px;
}
.formlabel
{
float: left;
background-color: #eee; /* also try #fff */
margin: 0px;
padding: 2px;
width: 75px;
height: 100%;
clear: both;
}
.formbutton
{
float: right;
background-color: #0f0;
margin: 0px;
padding: 0px;
width: 100px;
height: 100%;
}
The input field is flying to the right of the button because it is an inline element. Float works on block elements only, inline elements will always flow around the floated elements. This explains the behavior in the original jsFiddle.
Having said that, even if I put display:block on the input element it still behaves like inline. I was able to make the basic concept work for a div though, which is a true block element. See the jsFiddle here.
<div class="row">
<button>Action 1</button>
<div class="in"></div>
</div>
.row {
clear: both;
}
.in {
background-color: green;
height: 24px;
width: 100px;
}
button {
float: left;
margin-left: 110px;
width: 150px;
}
The only workaround seems to be the one offered by Musa (see this jsFiddle) where he aligns the buttons to the right using text-align and limiting the width of the div.
I am not a CSS expert and usually this task works for me using table
<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>
if table by some reason is not an option you can use div/span
<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>
It will about like this
using Block formatting context https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
jsfiddle code: http://jsfiddle.net/EeNFH/9/
the html code:
<div class="inp">
<input type="text">
</div>
<div class="btns">
<p><button>Action 1</button></p>
<p><button>Action 2</button></p>
</div>
and the styles:
input {
width: 100px;
}
button {
width: 150px;
}
.inp{
float:left;
}
.btns{
overflow:hidden;
}
I have aligned textboxes with their labels using the line-height method proposed here. I didn't simply use the width attribute because I wanted it to dynamically adjust if the label text changed. To get Firefox (haven't tried other browsers) to apply the line height to the column with the inputs, I had to use this hack (note the <div class="hack">):
HTML
<div class="textbox-column label">
<div>User Name:</div>
<div>Password:</div>
</div>
<div class="textbox-column input">
<div><div class="hack">#</div><input type="textbox" name="username" /></div>
<div><div class="hack">#</div><input type="password" name="password" /></div>
</div>
<div class="clear"></div>
CSS
div.clear {
clear: both;
}
.textbox-column {
line-height:1.6em;
}
.textbox-column.label {
float: left;
margin-right:1em;
}
.textbox-column.input {
float: right;
}
.textbox-column .hack {
display: inline;
width: 1em;
margin-right: -1em;
}
Can any one suggest a cleaner solution?
Here is a live demo of this code: http://jsfiddle.net/fbe7P/
CSS works best when things are grouped together, so I would group the controls into rows.
Also, the plus side of this method is that it degrades well for small screen sizes.
HTML:
<div class="row">
<label for="username">Username:</label>
<input type="text" id="username" />
</div>
<div class="row">
<label for="password">Password:</label>
<input type="password" id="password" />
</div>
CSS:
.row {
overflow: auto;
}
.row label {
float: left;
min-width: 100px;
}
.row input {
float: right;
}
Demo: http://jsfiddle.net/ezp9H/2/
I have the following html:
<div id="holder">
<span>Search for</span>
<input id="srchfor" />
<span>near</span>
<input id="srchin" />
<span>submit</span>
</div>
The containing div is fixed width. The width of the 3 spans will depend on font size. Is it possible to make the two inputs take a width so that they are both equally sized, and they consume all the remaining space in holder? Or does this require using javascript?
Edit: My aim is to have the 5 elements all on one line, rather than split over several lines.
This is an old post but I came across it and figured I would answer it for the next person. Here is a CSS/HTML snippet that should resolve this issue. It is kind of like a HTML5 flexbox but without HTML5 or a flexbox. You can add width to whatever 2 sections needed and the third will fill the remaining void.
<style type="text/css">
.form-group {
border: 1px solid black;
margin-bottom: 20px;
padding: 10px;
width: 75%;
}
.a {
float: right;
margin-left: 10px;
width: 30%;
}
.a input {
width: 100%;
}
.b {
float: left;
margin-right: 10px;
width: 33%;
}
.b input {
width: 100%;
}
.c {
display: block;
overflow: hidden;
}
.c input {
width: 100%;
}
</style>
<div id="wrapper">
<div class="form-group">
<span class="a">
<label>Thing 1</label><br />
<input type="text" />
</span>
<span class="b">
<label>Thing 2</label><br />
<input type="text" />
</span>
<span class="c">
<label>Thing 3</label><br>
<input type="text" />
</span>
</div>
<div class="form-group">
<div class="a">
<label>Thing 1</label><br />
<input type="text" />
</div>
<div class="b">
<label>Thing 2</label><br />
<input type="text" />
</div>
<div class="c">
<label>Thing 3</label><br>
<input type="text" />
</div>
</div>
</div>
Well, you could change the display type from display: inline to display: block to make them fill space. But I don't know if the inline is an requirement.
You have to choose a fixed width for the span elements, and use the display:inline-block property like in this example.