I have a series of inline divs that aren't wrapping correctly. As the browser is resized, the divs should be aligning flush left but sometimes they are flush right. I've read several articles on this but they don't seem to be the same issue. Any help would be much appreciated. My jsfiddle is http://jsfiddle.net/7uuLaLg4/.
<style type="text/css">
.box
{
float: left;
border: 1px solid black;
}
.address .item
{
display: inline;
float: left;
}
</style>
<div class="box">
<div class="address">
<div class="item">
<div>Address (Number & Road) <label class="required">*</label></div>
<div><input id="User_Address_Address1" name="User.Address.Address1" style="width: 13em;" type="text" value="1 Main St." /></div>
</div>
<div class="item">
<div>Address 2 (APT, Suite...)</div>
<div><input id="User_Address_Address2" name="User.Address.Address2" type="text" value="" /></div>
</div>
<div class="item">
<div>City<label class="required">*</label></div>
<div><input id="User_Address_City" name="User.Address.City" type="text" value="Anytown" /></div>
</div>
<div class="item">
<div>State<label class="required">*</label></div>
<div>
<select id="User_Address_StateID" name="User.Address.StateID">
<option selected="selected" value="3">Kentucky</option>
</select>
</div>
</div>
<div class="item">
<div>Zip<label class="required">*</label></div>
<div><input class="zip-mask" id="User_Address_Zip" maxlength="5" name="User.Address.Zip" style="width: 5em;" type="text" value="12345" /></div>
</div>
<div class="item">
<div>County<label class="required">*</label></div>
<div>
<select id="User_Address_CountyID" name="User.Address.CountyID">
<option value="0"></option>
<option selected="selected" value="125542">Campbell</option>
</select>
</div>
</div>
<div class="item">
<div>Country<label class="required">*</label></div>
<div>
<select id="User_Address_CountryID" name="User.Address.CountryID">
<option value="0"></option>
<option selected="selected" value="1">United States</option>
</select>
</div>
</div>
</div>
</div>
Here is fixed example.
http://jsfiddle.net/7uuLaLg4/2/
.box{
border: 1px solid black;
text-align: left;
}
.address .item{
display: inline-block;
margin: 0 0 10px 0;
}
They are not all the same height which is why sometimes they act like they are floating right.
Something like min-height: 60px; should help.
.address .item {
display: inline-block;
min-height: 60px;
}
http://jsfiddle.net/bb1ooguo/1/
Related
In the default CSS code for radio buttonn, it is gray when it is not selected and is blue when it is selected:
I however need it to be black in both states. Thus, I have overriden SCSS for radio buttons. Here comes my code:
HTML:
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="0">No</label>
</div>
</div>
</div>
</div>
CSS:
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 50%;
top: -2px;
left: -1px;
position: relative;
background-color:white;
display: inline-block;
visibility: visible;
border: 1px solid black;
}
input[type='radio']:checked:after {
border: 4.5px solid black;
}
The problem with this code is that the small circle in the middle of the checked button is not shown anymore:
Can you help me with this?
You can use the new property accent-color which sets the colour for the input. Broswer support is limited to Chrome and Firefox at the moment so you will create fallbacks for other browsers.
input {accent-color: black;}
input {
accent-color: black;
}
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="1">Yes</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" formControlName="earlierExperience" value="0">No</label>
</div>
</div>
</div>
</div>
For solution, you can use property filter in css.
input[type='radio'] {
filter: grayscale(100%) contrast(200%);
}
input[type='radio'] {
filter: grayscale(100%) contrast(200%);
}
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<label>
<input
type="radio"
formControlName="earlierExperience"
value="1"
/>Yes
</label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input
type="radio"
formControlName="earlierExperience"
value="0"
/>No
</label>
</div>
</div>
</div>
</div>
Custom solution with box-shadow, pseudo-element and input binding to label
.radio {
margin-left: 0.125em;
}
.radio label {
position: relative;
padding-left: 1.5em;
cursor: pointer;
}
.radio label::after {
content: '';
width: 1em;
height: 1em;
position: absolute;
top: 0;
left: 0.25em;
border-radius: 50%;
box-shadow: inset 0 0 0 2px black;
}
input[type='radio'] {
position: absolute;
visibility: hidden;
}
input[type='radio']:checked~label::after {
box-shadow: inset 0 0 0 2px black, inset 0 0 0 4px white, inset 0 0 0 10px rgb(0, 0, 0);
}
<div class="col-md-2 col-sm-6">
<div class="row">
<div class="col-md-12">
<label>Earlier experience in this field?</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="radio">
<input id="yes" type="radio" name="radio" formControlName="earlierExperience" value="1" />
<label for="yes"> Yes </label>
</div>
</div>
<div class="col-md-6">
<div class="radio">
<input id="no" type="radio" name="radio" formControlName="earlierExperience" value="0" />
<label for="no"> No </label>
</div>
</div>
</div>
</div>
Semantically, my data is structured something like the following:
<div class="inputs">
<div class="top">
<h4>Top</h4>
<label for="top-1">Label 1</label>
<input id="top-1"/>
<label for="top-2">Label 2 is longer than the others</label>
<input id="top-2"/>
</div>
<div class="middle">
<h4>Middle</h4>
<label for="middle-1">Label 3</label>
<select id="middle-1">
<option value="middle-value-1">Value 1</option>
<option value="middle-value-2" selected>This is a longer value</option>
</select>
<label for="middle-2">Label 4</label>
<input id="middle-2"/>
</div>
<div class="bottom">
<h4>Bottom</h4>
<label for="bottom-1">Label 5</label>
<input id="bottom-1"/>
<label for="bottom-2">Label 6</label>
<input id="bottom-2"/>
</div>
</div>
I'd like to display these as distinct but related groups. For aesthetic purposes, I'd like to align and equally size all of the inputs and selects. Is it possible to do this without using explicit widths for everything? I greatly prefer to let things size themselves whenever possible.
Below is an implementation using display: grid with fixed widths for the columns and the grid itself. Is there any way to do this with dynamic sizes?
I'm not stuck on display: grid, by the way. It's just the simplest solution I've come up with so far. I like that it helps keep my HTML simple and semantic. I can use display: table just as well if I nest the labels and inputs in a div with display: table-row. But I still can't let things size dynamically, unless I flatten it by removing the top, middle, and bottom divs.
.inputs > div {
display: grid;
grid-template-columns: 13em 10em;
width: 24em;
gap: 0.5em;
padding: 0.5em;
}
.inputs label {
grid-column: 1;
}
.inputs select, .inputs input {
grid-column: 2;
}
.inputs h4 {
grid-column: 1 / span 2;
margin: 0;
}
.top, .bottom {
background-color: #c0c0c0;
}
.middle {
background-color: #e0e0e0;
}
.middle, .bottom {
margin-top: 0.5em;
}
<div class="inputs">
<div class="top">
<h4>Top</h4>
<label for="top-1">Label 1</label>
<input id="top-1"/>
<label for="top-2">Label 2 is longer than the others</label>
<input id="top-2"/>
</div>
<div class="middle">
<h4>Middle</h4>
<label for="middle-1">Label 3</label>
<select id="middle-1">
<option value="middle-value-1">Value 1</option>
<option value="middle-value-2" selected>This is a longer value</option>
</select>
<label for="middle-2">Label 4</label>
<input id="middle-2"/>
</div>
<div class="bottom">
<h4>Bottom</h4>
<label for="bottom-1">Label 5</label>
<input id="bottom-1"/>
<label for="bottom-2">Label 6</label>
<input id="bottom-2"/>
</div>
</div>
I found a solution with display: table. It's a little uglier than the grid solution and not quite as semantic as I'd like, but it's close, and it does what I want.
.inputs {
display: table;
border-collapse: collapse;
}
.inputs > .top, .inputs > .bottom {
display: table-row-group;
background-color: #c0c0c0;
}
.inputs > .middle {
display: table-row-group;
background-color: #e0e0e0;
}
.input {
display: table-row;
}
.input > * {
display: table-cell;
}
.input > h4, .input > label {
padding: 0.5em 0.25em 0 0.5em;
}
.input > select, .input > input {
margin: 0 0.5em 0.25em 0;
box-sizing: border-box;
width: calc(100% - 0.5em);
}
.input:last-child > * {
margin-bottom: 0.5em;
}
.padding {
padding: 0.5em 0;
}
<div class="inputs">
<div class="top">
<div class="input">
<h4>Top</h4>
<div class="empty"></div>
</div>
<div class="input">
<label for="top-1">Label 1</label>
<input id="top-1"/>
</div>
<div class="input">
<label for="top-2">Label 2 is longer than the others</label>
<input id="top-2"/>
</div>
</div>
<div class="input">
<div class="padding"></div>
</div>
<div class="middle">
<div class="input">
<h4>Middle</h4>
<div class="empty"></div>
</div>
<div class="input">
<label for="middle-1">Label 3</label>
<select id="middle-1">
<option value="middle-value-1">Value 1</option>
<option value="middle-value-2" selected="selected">This is a longer value</option>
</select>
</div>
<div class="input">
<label for="middle-2">Label 4</label>
<input id="middle-2"/>
</div>
</div>
<div class="input">
<div class="padding"></div>
</div>
<div class="bottom">
<div class="input">
<h4>Bottom</h4>
<div class="empty"></div>
</div>
<div class="input">
<label for="bottom-1">Label 5</label>
<input id="bottom-1"/>
</div>
<div class="input">
<label for="bottom-2">Label 6</label>
<input id="bottom-2"/>
</div>
</div>
</div>
You can set your grid up more dynamically with something like this:
.inputs {
width: 33%;
min-width: 25em;
}
.inputs > div {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 0.5em;
padding: 0.5em;
}
I used your outer container to deal with the width as it relates to the screen. The hard min-width of 25px keeps the long label from wrapping to another line, instead showing a horizontal scrollbar if the screen size causes 33% of the width to go below 25px.
For your inner containers, you can change the unit in grid-template-columns to fr, which means fraction of available space. This will let your columns dynamically size along with your window (until you hit the min-width for the outer container). You can experiment with the width percentage to work out just how much dynamic sizing you would like to do.
This is a good writeup of fr if you would like one.
Hello everyone I have form which contains few different group of fields. In order to keep them together I used div elements and make them act like table elements. I used this method to avoid table elements inside of the form. In other hand some people said this approach is the same basically since I made div's to act like a table. To be honest I'm not sure if this is the best option. Here is example of my code.
form {
width: 820px;
}
form.frmLayout fieldset {
border: #ccc 2px solid;
margin: 10px;
border-radius:3px;
}
form.frmLayout legend {
font-weight: bold;
background-color: #c8e2db;
border-radius:3px;
padding: 3px;
border: #ccc 2px solid;
}
form.frmLayout label {
float: left;
font-weight: bold;
display: block;
}
form.frmLayout input[type=text] {
text-align: left;
background-color: #c8e2db;
}
div.formItem {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-repeat: repeat-x;
clear: both;
border-bottom: #ccc 2px dashed;
}
div.formItem:last-child{
border-bottom: none;
}
div.formTbl {
display: table;
width: 100%;
}
div.frRow {
display: table-row;
text-align: left;
}
div.frCell {
display: table-cell;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
}
div.frCell span {
font-weight: bold;
}
<form name="myForm" id="myForm" method="POST" action="#" class="frmLayout">
<input type="hidden" name="frmhs_id" id="frmhs_id" value="" />
<fieldset>
<legend>My Form</legend>
<div class="formItem">
<div class="formTbl">
<div class="frRow">
<div class="frCell" style="width:60%;">
</div>
<div class="frCell" style="width:40%;">
<div class="formTbl">
<div class="frRow">
<div class="frCell" style="width:40%;">
<span>Acoustic Reflex Thresholds</span>
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<span>500</span>
</div>
<div class="frCell" style="width:10%;">
<span>1000</span>
</div>
<div class="frCell" style="width:10%;">
<span>2000</span>
</div>
<div class="frCell" style="width:10%;">
<span>4000</span>
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td6" id="frmhs_td6" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td7" id="frmhs_td7" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td8" id="frmhs_td8" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td9" id="frmhs_td9" value="" size="4" maxlength="4" />
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td15" id="frmhs_td15" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td16" id="frmhs_td16" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td17" id="frmhs_td17" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td18" id="frmhs_td18" value="" size="4" maxlength="4" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="formItem">
<div style="float:left;">
<span><input type="submit" name="frmSubmit" id="frmhdSubmit" value="Submit"></span>
</div>
<div style="float:right;">
<span id="MsgFrm"></span>
</div>
</div>
</fieldset>
</form>
As you can see in my example above title Acoustic Reflex Thresholds is not on the center. Also I think that affects first set of div cells to change the width. I'm wondering how I can make title to go over entire length of div cell? If anyone knows how this can be fixed or is there better way to do this please let me know. Thanks in advance.
One of the limitations of css table layout is that you cannot simulate colspan, so the cells are going to be sized the same as the rest in its "column" even if its only 1 column in the row (as you can see with your "Acoustic Reflex Thresholds" heading).
What you can do is make the heading a table-caption instead of a row and that works, as you can see if you run the updated code snippet below.
There are 2 changes required:
CSS: Add the new class for the table caption
div.frCaption{
display: table-caption;
caption-side: top;
text-align: center;
font-weight: bold;
}
HTML: change the table-row to table-caption
In the row that contains with you "Acoustic Reflex Thresholds" heading:
Change the class from frRow to frCaption
Remove the frCell div altogether
[...right column...]
<div class="frCell" style="width:40%;">
<div class="formTbl">
<div class="frCaption ">
<span>Acoustic Reflex Thresholds</span>
</div>
<div class="frRow">
[... rest of rows...]
form {
width: 820px;
}
form.frmLayout fieldset {
border: #ccc 2px solid;
margin: 10px;
border-radius:3px;
}
form.frmLayout legend {
font-weight: bold;
background-color: #c8e2db;
border-radius:3px;
padding: 3px;
border: #ccc 2px solid;
}
form.frmLayout label {
float: left;
font-weight: bold;
display: block;
}
form.frmLayout input[type=text] {
text-align: left;
background-color: #c8e2db;
}
div.formItem {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-repeat: repeat-x;
clear: both;
border-bottom: #ccc 2px dashed;
}
div.formItem:last-child{
border-bottom: none;
}
div.formTbl {
display: table;
width: 100%;
}
div.frRow {
display: table-row;
text-align: left;
}
div.frCell {
display: table-cell;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
}
div.frCell span {
font-weight: bold;
}
div.frCaption{
display: table-caption;
caption-side: top;
text-align: center;
font-weight: bold;
}
<form name="myForm" id="myForm" method="POST" action="#" class="frmLayout">
<input type="hidden" name="frmhs_id" id="frmhs_id" value="" />
<fieldset>
<legend>My Form</legend>
<div class="formItem">
<div class="formTbl">
<div class="frRow">
<div class="frCell" style="width:60%;">
</div>
<div class="frCell" style="width:40%;">
<div class="formTbl">
<div class="frCaption ">
<span>Acoustic Reflex Thresholds</span>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<span>500</span>
</div>
<div class="frCell" style="width:10%;">
<span>1000</span>
</div>
<div class="frCell" style="width:10%;">
<span>2000</span>
</div>
<div class="frCell" style="width:10%;">
<span>4000</span>
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td6" id="frmhs_td6" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td7" id="frmhs_td7" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td8" id="frmhs_td8" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td9" id="frmhs_td9" value="" size="4" maxlength="4" />
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td15" id="frmhs_td15" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td16" id="frmhs_td16" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td17" id="frmhs_td17" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td18" id="frmhs_td18" value="" size="4" maxlength="4" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="formItem">
<div style="float:left;">
<span><input type="submit" name="frmSubmit" id="frmhdSubmit" value="Submit"></span>
</div>
<div style="float:right;">
<span id="MsgFrm"></span>
</div>
</div>
</fieldset>
</form>
I have a need to get the TextBoxesGroup scrolling under the image on the top if the visitors scroll up or under the Add to basket in the footer if the visitors scroll down.
My footer add-to-wrap is pretty much fixed but the problem is that the div will not scroll undless it goes well under the footer and then when I scroll the add-to-wrap div also scrolls.
What am I doing wrong?
<style>
.wrong_email{
display:none;
color:red;
}
.add-to-wrap {
width: 100%;
display: block;
position: fixed;
bottom: 0;
margin: 0 auto;
text-align: center;
background-color: rgba(0,0,0,0.6);
padding: 10px 0 10px 0;
z-index: 3;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4" style="padding-left:0px; padding-right:0px;">
<img src="/brand/nvite.png" class="img-responsive"/>
</div>
<div>
<form method="POST" id="login_form">
<div id='TextBoxesGroup' class="textboxes-area">
<div id="TextBoxDiv1">
<input type='text' id='textbox1' name='textbox_1' class="form-control" placeholder="Enter email address here"/>
</div>
<div class="wrong_email" id="err_1">Wrong email address</div>
<div class="divider"><img src="/mobileimages/brand_takeovers/divider_invite.png" class="img-responsive"/></div>
<div id="TextBoxDiv2">
<input type='text' id='textbox2' name='textbox_2' class="form-control" placeholder="Enter email address here"/>
</div>
<div class="wrong_email" id="err_2">Wrong email address</div>
<div class="divider"><img src="/mobileimages/brand_takeovers/divider_invite.png" class="img-responsive"/></div>
<div id="TextBoxDiv3">
<input type='text' id='textbox3' name='textbox_3' class="form-control" placeholder="Enter email address here"/>
</div>
<div class="wrong_email" id="err_3" >Wrong email address</div>
</div>
<span id='addButton' class="send-invite-more-boxes "/><img src="invitemore.png" class="img-responsive"/></span>
</div>
</div>
</div> <!-- /container -->
<div class="add-to-wrap">
<button type="submit" class="send-invite-button">Add To Basket</button>
</div>
</form>
I am trying to create a control which contains two listboxes with add/remove buttons to move items from one list to the other. Typically I would do this using a table, but I am trying to follow css standards and use divs.
I have the listboxes aligned perfectly, but I can't figure out how to set up the buttons between them.
This is my html (updated to show rendered html):
<div id="dealsummary-ladderlist">
<form action="/Reporting/DealSummaryComparison" method="post">
<div id="available">
<div><strong>Available</strong></div>
<div id="available-items">
<select id="ItemsToSelect" multiple="multiple" name="ItemsToSelect" size="30">
<option value="16">Item 1</option>
<option value="17">Item 2</option>
<option value="21">Item 3</option>
<option value="22">Item 4</option>
<option value="23">Item 5</option>
<option value="24">Item 6</option>
<option value="25">Item 7</option>
</select>
</div>
</div>
<div id="add-remove">
<div><input type="button" value=">>" /></div>
<div><input type="button" value="<<" /></div>
</div>
<div id="selected">
<div><strong>Selected</strong></div>
<div id="selected-items">
<select id="ItemsToDeselect" multiple="multiple" name="ItemsToDeselect" size="30"></select>
</div>
</div>
<div style="clear:both;"></div>
<br /><br />
<center>
<p>
<input type="submit" value="Generate Report" />
</p>
</center>
</form>
</div>
This is what I have for css:
#add-remove {
/* want to center on page */
float: left;
width: 10%;
}
#add-remove div {
/* want to add even spacing between buttons */
}
#available {
float: left;
width: 45%;
}
#selected {
float: right;
width: 45%;
}
#available #available-items,
#selected #selected-items {
margin: 1em 0 0 0;
}
#available #available-items select,
#selected #selected-items select {
width: 100%;
font-size: 10pt;
}
How would I achieve the centering and even spacing of the arrow buttons using css?
If you know the precise width and height of the <div id="add-remove"> element, you could wrap the whole thing in a relatively-positioned <div> and use absolute positioning with negative margins like so:
<div id="relativeWrapper"> <!-- added this -->
<div id="available">
<!-- ... snip ... -->
</div>
<div id="add-remove">
<div><input type="button" value=">>" /></div>
<div><input type="button" value="<<" /></div>
</div>
<div id="selected">
<!-- ... snip ... -->
</div>
<div style="clear:both;"></div>
</div>
<!-- ... etc ... -->
With the CSS:
div#relativeWrapper {
position: relative;
}
div#add-remove {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
margin-left: -40px;
height: 64px;
margin-top: -32px;
}
Setting both top and left to 50% and margin-left to half the value of width and margin-top to half the value of height will horizontally and vertically center an absolutely-positioned element within its relative parent.
Vertical-centering is difficult to achieve; you can use display: inline-block; vertical-align: middle;, but inline-block is not supported by all browsers. Alternatively, using display: table-cell; vertical-align: middle; tends to work.
Incidentally, the <center> element is deprecated. Use <div style="text-align: center;"> or simply <p style="text-align: center;"> instead.