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
Related
I'm trying to do some simple HTML and CSS to get a page to layout something like the image below, but I'm way out of my element and not even sure how to get it started. Right now, my biggest problem is I can't get the Client Birth Date, and Spouse First Name to appear on its own line. I feel like I could add divs, but then I'd probably have divs everywhere (I'm assuming that's a bad thing.)
Here's a JSFiddle of what I have started.
<div>
<label for="WebName">Name</label>
<input type="text" id="WebName" />
</div>
<div>
<label for="WebEmail">Email</label>
<input type="text" id="WebEmail" />
</div>
<div>
<label for="WebPhone">Phone</label>
<input type="text" id="WebPhone" />
</div>
<hr />
<div style="border: 1px solid black; overflow: hidden;">
<!-- left -->
<div style="width: 500px; float:left; border: 1px solid red;">
<label for="ClientFirstName">Client First Name*</label>
<input type="text" id="ClientFirstName" />
<label for="ClientBirthDate">Client Birth Date</label>
<input type="text" id="ClientBirthDate" />
</div>
<!-- right -->
<div style="float:left; width: 500px; border: 1px solid green;">
<label for="ClientLastName">Client Last Name*</label>
<input type="text" id="ClientLastName" />
<label for="ClientAge">Client Age</label>
<input type="text" id="ClientAge" />
</div>
</div>
<hr />
<div>
<label for="AppointmentDate">Appointment Date</label>
<input type="text" id="AppointmentDate" />
<label for="Goals">Goals</label>
<textarea id="Goals" rows="4" cols="80">
</textarea>
</div>
I would add divs in those specific cases. Form elements can be messy when it comes to layout. I've found that wrapping a label + input inside a div is the best practice here. And since you've already done that in the first section you might as well follow the pattern.
<div class="inputWraper">
<label for="thisInputName">Some Text</label>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</div>
You could technically also wrap everything in the label instead of a div. This has some pros and cons mostly in that it makes everything clickable and adds focus. It's especially good for checkboxes and radio buttons as the hit area is bigger.
<label for="thisInputName">
<span>Your label text</span>
<input type="text" name="thisInputName" value="" placeholder="What displays />
</label>
I've created the following input label/text box, but its huge and runs across the page. Is there anyway I can change the size of the textbox so that it's a lot smaller than it currently is? My code below:
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
PS: I'm doing this in Lightning, so my CSS is already installed. Unfortunately, I'm not allowed to edit the CSS and have to find another way to resize this. I fsomeone can help me out, that would really help.
If css is absolutely out of the question you could always just add an inline style rule. This is generally not considered best practice, but if that's all you're left with you may not have another option.
<div style="width:300px;" class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
<style>
input, button, select, textarea {
width: 100%;
}
</style>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>`enter code here`
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
I tried using bootstrap for aligning my text and input box on the same row but it's not working:
<tr id="price_box">
<div class="row">
<th>Price:</th>
<td>
Rs
<input id="price" name="price" type="text" value="">
<span class="pricebox_end">.00</span>
</div>
<br>(Optional - do not include period, comma or cents)
<div id="err_price" style="display: none">
<span class="warning nohistory"></span>
</div>
</td>
</tr>
The above is just a fragment, but I could make a fiddle if it helps. Maybe you know what I should do to make the texts and the input box display on the same row?
Update
The following rendered them on the same row.
<tr id="price_box">
<th>Price:</th>
<td>
<div style="float:left">
Rs
</div>
<input id="price" name="price" type="text" value=""><span class="pricebox_end">.00</span>
<br>(Optional - do not include period, comma or cents)
With the CSS.
#price {
float:left;
}
.pricebox_end {
float:left;
}
I had to keep the table because of complex side effects if I removed the table.
You have malformed HTML with tables and Bootstrap thrown in. I would just use the grid system:
<div class="row">
<div class="col-md-3">
Price:
</div>
<div class="col-md-3">
<input id="price" name="price" type="text" value="" />
</div>
<div class="col-md-3">
Rs
</div>
<div class="col-md-3">
<span class="pricebox_end">.00</span>
</div>
</div>
The grid system is a nice replacement for HTML tables. Bootstrap lets you write less HTML and gives you responsiveness out of the box.
The div <div class="row"> HTML element in your code is not a valid direct child element for <tr> and adds unexpected behaviour.
Further, the <input id="price" .. > element wasn't closed, causing the issue of the elements not being rendered on the same row. You do not need to float your elements.
You can close an input element by doing <input id=price .. /> or <input id=price ../></input>
I've cleaned up your code below.
<tr id="price_box">
<th>Price:</th>
<td>
Rs <input id="price" name="price" type="text" value="" /><span class="pricebox_end">.00</span>
<br />
(Optional - do not include period, comma or cents)
</td>
</tr>
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.
I have an HTML code as follows
<body>
Hello UserName:<input tyep="text"/><br/>
Pass:<input type="text"/>
</body>
I want the two text fields should be aligned in such a way that their left borders should start from the same positions of two lines.Because as it is if I runs the two text fields starts exactly after their labels ends, which I don't want as it looks odd.
How would I do that?
Take a look at this example with Chrome Developer Tools or Firebug.
HTML:
<div class="main">
<div class="field">
<label for="n">Name</label>
<input type="text" name="n" />
</div>
<div class="field">
<label for="ln">Surnemt</label>
<input type="text" name="ln" />
</div>
<div class="field">
<label for="a">Bithplace</label>
<input type="text" name="a" />
</div>
</div>
CSS:
body {font-size:14px;}
label {float:left; padding-right:10px;}
.field {clear:both; text-align:right; line-height:25px;}
.main {float:left;}