So I am breaking this page into several blocks that have a bunch of checkbox options. The goal is 4 tiles wide 3 tiles tall. The problem is that I set the "columns" to be 100% height which I thought would be 100% of the parent div, but it seems that it is actually 100% of the the parents parent, any ideas?
<div id="left" style="width:50%;height:100%;display:inline;float:left">
<div id="leftRow1" style="width:100%;height:30%;display:inline;text-align:center">
<div id="column1" style="width:50%;height:100%;display:inline;text-align:left;float:left">
<h3>Appliances</h3>
<div>
<input id="dishwasher" class="css-checkbox" type="checkbox">Dishwasher
</div>
<div>
<input id="dryer" class="css-checkbox" type="checkbox">Dryer
</div>
<div>
<input id="freezer" class="css-checkbox" type="checkbox">Freezer
</div>
<div>
<input id="garbage" class="css-checkbox" type="checkbox">Garbage
</div>
</div>
<div id="column2" style="width:50%;height:100%;display:inline;text-align:left;float:right">
<h3 style="color:white">.</h3>
<div>
<input id="microwave" class="css-checkbox" type="checkbox">Microwave
</div>
<div>
<input id="range" class="css-checkbox" type="checkbox">Range/Oven
</div>
<div>
<input id="refridgerator" class="css-checkbox" type="checkbox">Refridgerator
</div>
<div>
<input id="washer" class="css-checkbox" type="checkbox">Washer
</div>
</div>
</div>
<div id="leftRow2" style="width:100%;height:30%;display:inline;text-align:center">
<div id="column3" style="width:50%;height:100%;display:inline;text-align:left;float:left">
<h3>Basement</h3>
<div>
<input id="finished" class="css-checkbox" type="checkbox">Finished
</div>
<div>
<input id="partialfinish" class="css-checkbox" type="checkbox">Partially Finished
</div>
</div>
<div id="column4" style="width:50%;height:100%;display:inline;text-align:left;float:right">
<h3 style="color:white">.</h3>
<div>
<input id="unfininshed" class="css-checkbox" type="checkbox">Unfinished
</div>
<div>
<input id="none" class="css-checkbox" type="checkbox">No Basement
</div>
</div>
</div>
</div>
Your problem is with display: inline. I didn't notice that at first with all the inline styling. You can't set the height on elements set to display inline. If you change them to inline-block then it should work fine.
Updated demo
Also, I took the liberty of removing your inline styling and moving them to 3 classes: wrapper - outermost div, leftrow - your two main divs (appliances and basement) and column - all inside divs.
Fixed Demo
Related
I have 2 checkbox inside a div with absolute position style.
Then when I try to check them I'm not allowed.
I tried to remove the position just for the checkbox but it doesn't work.
<div style="position:absolute">
<div class="apr-laflex-container apr-and-text-ellipsis-container">
<div>
<span>Status<span>
</div>
</div>
<div class="apr-laflex-container apr-and-text-ellipsis-container">
<div>
<span>StartDateFrom</span>
</div>
<div>
<span>StartDateTo </span>
</div>
<div>
<div class="ScheduledOperation">
<input type="checkbox" name="Scheduled Operations" checked>
<label for="Scheduled Operations">Scheduled Operations</label>
</div>
<div class="UnscheduledOperation">
<input type="checkbox" name="Unscheduled Operations">
<label for="Unscheduled Operations">Unscheduled Operations</label>
</div>
</div>
</div>
Not sure if this is what you're referring to, but the for attribute on the labels needs to match an id on the input type="checkbox". I changed the for names to camelcase, since the id can't contain spaces, but really you want for and id to be shorter strings.
<div style="position:absolute">
<div class="apr-laflex-container apr-and-text-ellipsis-container">
<div>
<span>Status<span>
</div>
</div>
<div class="apr-laflex-container apr-and-text-ellipsis-container">
<div>
<span>StartDateFrom</span>
</div>
<div>
<span>StartDateTo </span>
</div>
<div>
<div class="ScheduledOperation">
<input id="scheduledOperations" type="checkbox" name="Scheduled Operations" checked>
<label for="scheduledOperations">Scheduled Operations</label>
</div>
<div class="UnscheduledOperation">
<input id="unscheduledOperations" type="checkbox" name="Unscheduled Operations">
<label for="unscheduledOperations">Unscheduled Operations</label>
</div>
</div>
</div>
I got the problem that i want to have 2 radiobuttons next to each other. but one below the other.
<div class="backgroundOverlay cShow" ng-show="isShownUser">
<div class="dropDown positionPopUp inpuBlock" id="add">
<div class="inputBlock">
<h1 class="popupTitle">{{titlePopup}}</h1>
<div>
<div class="cClearFloat cInputSpace">
<input placeholder="login" ng-model="currentUser.login">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Vorname" ng-model="currentUser.Vorname">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Nachname" ng-model="currentUser.Nachname">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="password" ng-model="currentUser.password">
</div>
<div class="cClearFloat cInputSpace cRadioAdmin">
<label><input type="radio" name="Admin">Ja</label>
<label><input type="radio" name="Admin">Nein</label>
<div class="cClearFloat cButtonsUser">
<button class="cButtonSpeichern" ng-click="showAlert()">Speichern</button>
<button class="cButtonAbbrechen" ng-click="isShownUser = false">Abbrechen</button>
</div>
can someone help me pls.
You need to understand the difference between inline elements and block elements.
Using a div instead of your label to wrap the input will do the job.
Like this:
<div><input type="radio" name="Admin">Ja</div>
<div><input type="radio" name="Admin">Nein</div>
You could also use the css, like this:
<label style="display:block"><input type="radio" name="Admin">Ja</label>
<label style="display:block"><input type="radio" name="Admin">Nein</label>
Similarly you can use display:inline to force inline(in case some other css is affecting this)
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
Hello I have a layout similar to the one above. I have some other things in the php file, but they are irrelevant. For example every new 5th element causes a new line (br), which will make sense when you see the pictures.
Here is an image representation of the outcome:
This is what I need :
How can I possibly do this, I will appreciate any idea. Cheers.
Note: Span tags contain the text next to the radio buttons.
iyi akşamlar :) you can remove div's, create class inside radio buttons and put them altogether into container for each row.
LIVE DEMO HERE
<div class="container">
<input type="radio" class="radyo">
<div class="text">a2</div>
<input type="radio"class="radyo">
<div class="text">a3</div>
<input type="radio"class="radyo">
<div class="text">a4</div>
<input type="radio"class="radyo">
<div class="text">a5</div>
</div>
<div class="container">
<input type="radio"class="radyo">
<div class="text">beyler ben geldim</div>
<input type="radio"class="radyo">
<div class="text">tamam</div>
</div>
First of all, avoid using inline styles.
If you want the result in the second image, simply define width for each element instead of margin.
<div style="display:inline-block; margin-left:10%; width:15%;">
or set the margin-left and width as you see fit.
I'd suggest a nested div pattern, where you can utilize precised columns without margin/padding and insert a div that hold the margin/padding as desired. Then push your checkboxes into each nested div. I'd also suggest using a <label> over <span> (as it is a span with some extra properties) (MDN Label)
.cols {float:left;width:25%} //Set columns up, without margin/padding so they align as expected in 4.
.col {margin-left:10%;} // Inner column with margin/padding etc.
<div class='cols'>
<div class='col'>
<input type='radio' name='radio1' /><label for='radio1'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio2' /><label for='radio2'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio3' /><label for='radio3'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio4' /><label for='radio4'></label>
</div>
</div>
If you have the width of your outer container, it would be easier for you to align fixed-sized divs inside it. For example if we have a div with width: 300px;, and we want 3 radio boxes on a row, we specify width: 100px; for them. Add float: left; and it should work out well for you.
Here's a live demo.
If fixed width doesn't suit you, there are many other approaches to do this, I can share if this doesn't work for you.
I'm coming from an iOS background and having trouble laying out elements in HTML and using CSS. I want to create something as "simple" as this:
I want to be able to split the screen in separate divs but have all the fieldsets align with each other. (They are fieldsets but I didn't draw them in my primitive mockup. I also didn't put anything in the third box but there's more stuff in there).
But here are some of my questions:
Box 1 questions:
I basically have style="display:block;" in all my elements. If I have an overarching div as style=display:block, I don't get the same effect. Is there a better way to do that?
Box 2 general question:
I ended up hardcoding all my styles to sort of achieve the image shown. It doesn't seem very usable or scalable. Any general principals I should start with?
<div style="display:inline-block; vertical-align:top; float:left; width:25%">
<fieldset>
<legend>First fieldset</legend>
<div style="display:block;">field 1
<input type="text" style="display:block;" />
</div>
<div style="display:block;">field 2
<select style="display:block;">
<option>field 2 options</option>
</select>
</div>
<div style="display:block;">field 3
<input type="text" style="display:block;" />
</div>
</fieldset>
</div>
<div style="display:inline-block; vertical-align:top; width:33%">
<fieldset>
<legend>Second fieldset</legend>
<div style="clear:both"></div>
<div class="one-half" style="display:inline-block; float:left;">
<input type="radio" name="scoops" />Single
<div style="display: block">Radio 1</div>
<div style="display: inline">Radio 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Radio 3</div>
</div>
<div class="one-half" style="display:inline-block;">
<input type="radio" name="scoops" />Double
<div style="display: block">Blah 1</div>
<div style="display: inline">Blah 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Blah 3</div>
</div>
</fieldset>
</div>
Your title says it all, don't use inline styles or it will quickly become a mess. Create an external stylesheet to hold all CSS, and style groups of elements targeted with CSS selectors.
Start by simplifying the structure. You have three columns, so three divs. It's a good idea to wrap them too:
<div id="wrapper">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
So you want them side-by-side. Floating them or using inline-block elements are two common techniques to achieve that. You tried to use both at the same time, choose one. I'll give an example for floating:
#wrapper { overflow: hidden; } /* clear the floats at the end,
so the wrapper extends down */
#col1, #col2, #col3 { float: left; }
#col1 { width: 25%; }
#col2 { width: 33%; }
You also don't need a div wrapping every field, and you don't have to manually make divs block (they are blocks by default, and fieldsets are too). Use labels and make them blocks too:
<fieldset>
<legend>First fieldset</legend>
<label for="fld1">field 1</label>
<input id="fld1" type="text">
<label for="fld2">field 2</label>
<select id="fld2">
<option>field 2 options</option>
</select>
<label for="fld3">field 3</label>
<input id="fld3" type="text">
</fieldset>
And make them all blocks:
label, input, select { display: block; }
I hope this gives you a general idea you can apply to the other columns.
This is exactly what CSS classes are for : http://www.w3schools.com/css/css_id_class.asp
For starters here are classes for your left and right sections:
.left {
display:inline-block;
vertical-align:top;
float:left;
width:25%;
}
.right {
display:inline-block;
vertical-align:top;
width:33%;
}
In use: http://jsfiddle.net/basarat/BM6Fp/#base
<div class="left">
<fieldset>
<legend>First fieldset</legend>
<div style="display:block;">field 1
<input type="text" style="display:block;" />
</div>
<div style="display:block;">field 2
<select style="display:block;">
<option>field 2 options</option>
</select>
</div>
<div style="display:block;">field 3
<input type="text" style="display:block;" />
</div>
</fieldset>
</div>
<div class="right">
<fieldset>
<legend>Second fieldset</legend>
<div style="clear:both"></div>
<div class="one-half" style="display:inline-block; float:left;">
<input type="radio" name="scoops" />Single
<div style="display: block">Radio 1</div>
<div style="display: inline">Radio 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Radio 3</div>
</div>
<div class="one-half" style="display:inline-block;">
<input type="radio" name="scoops" />Double
<div style="display: block">Blah 1</div>
<div style="display: inline">Blah 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Blah 3</div>
</div>
</fieldset>
</div>