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>
Related
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)
The given example is probably a bit bigger than required but I could not figure out in hours where the problem lies, so I am posting it. You just have to look into the label #problematic and around it (Line number 9 in the JSFiddle).
The problem with it is that it takes up all the space left by the adjacent label. The question is why? And what to do about it?
I had worked out this example (with the help of some SO community) to make the layout before incorporating the complex content. It works perfectly in the example. But it behaves weirdly in my code.
Here is the JSFiddle.
CODE:-
<form action="http://localhost/moodle/mod/quiz/processattempt.php" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="responseform">
<div>
<!-- ------------------------------------------------- -->
<div style="display:table;">
<div style="display:table-row; background-color:#e8c277;">
<label id="problematic" style="display:table-cell; padding:10px; border-width:1px;border-color:blue;border-style:solid;">True</label>
<label style="display:table-cell; padding:10px;border-width:1px;border-color:red;border-style:solid;"><span style="white-space:nowrap;">False</span></label>
<span style="display:table-cell;"></span>
</div>
<!-- ------------------------------------------------- -->
<div class="que multichoice deferredfeedback notyetanswered" id="q13">
<div>
<div class="formulation">
<h4 class="accesshide">Question text</h4>
<input type="hidden" name="q36:13_:sequencecheck" value="1" />
<div class="ablock" style="display:table-row;">
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:13_answer" value="0" id="q36:13_answer0" />
</span>
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:13_answer" value="1" id="q36:13_answer1" />
</span>
<label class="qtext" style="display:table-cell;">No individual country produces more than one-fourth of the world's sugar.
</label>
</div>
</div>
</div>
</div>
<div class="que multichoice deferredfeedback notyetanswered" id="q14">
<div>
<div class="formulation">
<h4 class="accesshide">Question text</h4>
<input type="hidden" name="q36:14_:sequencecheck" value="1" />
<div class="ablock" style="display:table-row;">
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:14_answer" value="0" id="q36:14_answer0" />
</span>
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:14_answer" value="1" id="q36:14_answer1" />
</span>
<label class="qtext" style="display:table-cell;">If Brazil produces less than 20% of the world's supply of any commodity listed in the table, Brazil is not the world's top exporter of than commodity.
</label>
</div>
</div>
</div>
</div>
<!-- ------------------------------------------------- -->
</div>
<!-- ------------------------------------------------- -->
<div class="submitbtns">
<input type="submit" name="next" value="Next" />
</div>
</div>
</form>
You can not have divs wrapping your table rows/cells. There were divs wrapping your second and third rows, causing them to be treated as if they were all in the first column.
See the fiddle below for an example of a working layout. Note: I deleted a lot of your divs. Your table structure has to be table:table-row:table-cell with no other divs wrapping the rows or cells. Removing the excess divs restored the proper layout.
JSFiddle
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
I reckon it must be fairly simple but i can't seem to figure out how to get my floats right. The picture shows what i want vs what i have. If you provide an answer please provide the logic also. thanks.
<div id="racks" style="overflow:auto">
<div id="selStat">
<p>No station selected</p>
</div>
<hr id="hrtest">
<div id="rackAction">
<p>Choose the type of card, then select which action to perform.</p>
<div id="radio">
Type:
<div class="fr">
<input type="radio" id="radioS" name="radio"><label for="radioS">S</label>
<input type="radio" id="radioP" name="radio"><label for="radioP">P</label>
<input type="radio" id="radioV" name="radio"><label for="radioV">V</label>
</div></div>
<p>Cardnumber: <input id="cardNum" class="fr" type="number" size="1"/> </p>
<p>Action:
<div class="fr">
<button onClick="addRack()" type="button">Add</button>
<button onClick="deleteRack()" type="button">Delete</button>
</div></p>
</div>
</div>
CSS is as follow:
.fr{
float:right;
}
Syntactically, you can't have a div inside of a p tag. On that topic, check this SO Question. To get the elements on the same line, you can place the "Action" text in a seperate div, and float it left.
The HTML:
<div id="racks" style="overflow:auto">
<div id="selStat">
<p>No station selected</p>
</div>
<hr id="hrtest">
<div id="rackAction">
<p>Choose the type of card, then select which action to perform.</p>
<div id="radio">
Type:
<div class="fr">
<input type="radio" class="margin-bottom" id="radioS" name="radio"><label for="radioS">S</label>
<input type="radio" class="margin-bottom" id="radioP" name="radio"><label for="radioP">P</label>
<input type="radio" class="margin-bottom" id="radioV" name="radio"><label for="radioV">V</label>
</div>
</div>
<p>Cardnumber: <input id="cardNum" class="fr" type="number" size="1"/> </p>
<div class="fl">Action:</div>
<div class="fr">
<button onClick="addRack()" type="button">Add</button>
<button onClick="deleteRack()" type="button">Delete</button>
</div>
</div>
</div>
The CSS:
.fr{
float:right;
}
.fl {
float:left;
}
.margin-bottom {
margin-bottom:10px;
}
The fiddle.
Edit:
As per the comments, you can add a class to the radio buttons in question, and add additional margins or padding to the bottom of the radio buttons. I have updated the code to include the class additions and the CSS.
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>