I have a div that contains a couple of radio buttons. These show/hide a textbox.
<p>Some text</p>
<div>
<div>
<input id="show" name="radioGroup" type="radio" value="1" /><label for="show">Show</label> -
<input id="hide" name="radioGroup" type="radio" value="0" /><label for="hide">Hide</label>
</div>
<div class="myTextBox">
<input type='text'>
</div>
</div>
<p>Some text</p>
When I show/hide the .myTextBox then the text bumps a couple of pixels. This is due to the padding & margin on the textbox.
Without removing these settings (padding/margin) is there a way to eliminate the CSS bump?
See example on jsFiddle http://jsfiddle.net/nTJZN/1/
See here.
What I am doing is basically instead of show() and hide() I'm altering the visibility property.
function ShowHideTextbox()
{
if($("#show").is(":checked"))
$(".myTextBox").css('visibility','visible');
else
$(".myTextBox").css('visibility','hidden');
}
This is because your input box is taller than the text, which causes the line to grow when the input box is shown. By inspecting the element, I determined the line was 28px high when the input box was visible, so applying a line-height of 28px fixes the problem, like so:
div
{
display: inline-block;
line-height: 28px;
}
See http://jsfiddle.net/X4X3U/
Related
I want to position a label above and to the left edge of a text field. I put them together in a div. The only problem left is that I need the correct position or display attribute that the input field doesn't react to the label. In that way, I could write text-align:left or float: left to position the label at the very edge of the div and thus at the very edge of the label.
<div class="AlignLeft">
<input type="text" id="1" name="name" maxlength="100" required>
<label for="name" id="1">Align label left</label><br>
</div>
Thank you!
without CSS
to make that on click of the label, the input will be focused.
you will need that your <label> element, have the for="" attribute
this attribute needs the same id="" as the input. (not the name="")
for attribute (docs): https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for
for making the <label> be on the left
put the label before the <input>
make the input nested inside the <label>, then insert a span before the <input>
no css solution:
<div>
<label for="myId"> <!-- put here the id -->
<span>this is the label text</span> <!-- the text -->
<input type="text" id="myId"> <!-- input -->
</label>
</div>
with CSS
if you can't change the HTML structure, then follow this second way (using CSS)
The float property, you showed before seems to work fine.
so just change the for="" attribute to be equal to the id="" of <input>
.AlignLeft label {
float: left;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
or use CSS flex with the direction of reverse
using flexbox you have other advantages like gap or centering, and so on...
.AlignLeft {
display: flex;
/* solve the problem (now the text is on the left side) */
flex-direction: row-reverse;
/* you can center easily using flex, or in this case put it on the left of the page */
justify-content: left;
align-items: center;
/* add a gap is easier with flex */
gap: 1rem;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
Is it possible somehow to make checkbox and text inline? Having trouble with this one, tried inline options through css, but seems I either can't use it or It is doesn't work.
Here is a simple example. All you need is a wrapper element and one line of CSS. By default, all immediate flex children will share the available horizontal space on the line.
.checkboxRow {
display: flex;
}
<div class="checkboxRow">
<input id="mycheckbox" type="checkbox">
<label for="mycheckbox">I am a label</label>
</div>
<div class="checkboxRow">
<input id="mycheckbox2" type="checkbox">
<label for="mycheckbox2">I am a label</label>
</div>
Here is my radio button code in struts tag, the space between radio button and radio button text box is congested how to give space between them
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="btn-group" data-toggle="buttons">
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" />
</div>
</div>
</div>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
I know this is an old question but to do this in Struts 2 use the cssStyle attribute if you only want it to apply to this group of radio buttons.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssStyle="margin-right:20px" />
Or you can use the cssClass attribute.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssClass="radioMarginRight" />
with
.radioMarginRight{
margin-right: 20px !important;
}
Both of these apply the CSS to the radio button and the label. To keep the margin from applying to the label with the cssClass attribute you could define the following CSS to set the label margin to 0.
label.radioMarginRight{
margin-right: 0px !important;
}
I dont know struts, but looking at this have you tried:
list="{' Male ',' Female '}"
Just putting some spaces between each of the '.
Its what you do in HTML + CSS so might work there
I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?
<div style="height:30px;">
<input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
I hope this is what you are looking for
JSFIDDLE
I included another <div> which contains the input elements and tried to vertical-align
this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.
However I have inline styles still. Change it once it works out for you.
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.