This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Radio buttons and label to display in same line
I have 3 labels and radiobuttons that i want to put on 1 line:
What i get now is this:
Spoortoegang
Uit
radiobutton
Aan
radiobutton
What i want is:
Spoortoegang Uit radiobutton Aan radiobutton
My code for this is:
<div ><p>Spoortoegang</p><label for="no">Uit;<input dojoType="dijit.form.RadioButton" id="valSR" name="group1" checked="checked" onchange='POI(this);' value="Show" type="radio"/> </label>
<label for="yes">Aan;<input dojoType="dijit.form.RadioButton" id="valSlope" name="group1" value="Hide" onchange='POI(this)' type="radio"/></label></div>
add "float: left" in css for all elements
Use CSS for positioning DOM elements. As you want all elements to be inline:
p, label, input { display: inline; }
instead of putting it in a paragraph enclose it in a span like
<div ><span>Spoortoegang</span><div >
Related
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed last month.
For radios having different name attribute like(code is in pug format)
input.radio.(name='value1' type='radio')
input.radio(name='value2' type='radio')
how to select all of these with on selector, something like
.radio[name = 'value1'], .radio[name= 'value2']{code}
but if I do like this the code gets too long for more radios.
Is there any other way to do this ?
You can use the * wildcard to select based on a specific attribute. Here is a simple example of using wildcard with input elments.
It selects all the elements containing the word input in the name attribute.
Read more about wildcard.
input[name*="input"]{
width:20px;
height:20px;
}
<input type="radio" name="input1"><br>
<input type="radio" name="input2"><br>
<input type="radio" name="input3"><br>
<input type="radio" name="input4"><br>
<input type="radio" name="input5"><br>
This question already has answers here:
Select elements where attribute is non-empty
(3 answers)
CSS selectors - how to select 'for' in CSS?
(3 answers)
Closed 4 years ago.
I know that input[type="text'] is used to select <input type="text"/>, what does input[text] mean?
This snippet appear in angular tutorial:
body, input[text], button {
color: #888;
font-weight: Cambria, Georgia;
}
Angular tutorial (At buttom of that page)
input[text] means that inputs with attribute text assigned to whatever will be returned:
<input text="123">
<input text="">
<input text>
but this won't be
<input type="text">
Proof:
console.log(document.querySelectorAll('input[text]'))
<input text="123">
<input text="">
<input text>
<input type="text">
Why it is like that in Angular tutorial? Probably a simple typo. They anyway don't have inputs in the provided example.
I have the following form, but I don't get align checkbox
<!-- Multiple Checkboxes (inline) -->
<div class="form-row">
<label class="chkdonar" for="donarchkform-0">Si, quiero donar a AMIAB</label>
<input id="donarchkform-0" checked="checked" name="donarchkform" type="checkbox" value="Si, quiero donar a AMIAB" />
</label>
this is the field where I have problem for getting align
Here is my code from the form
http://jsbin.com/mazuyinobu/edit?html,css,output
I would like to align my form look like this:
http://www.amiab.com/hacerte-socio
I hope i didn't edit your own jsbin.
http://jsbin.com/pewariguro/1/edit?html,css,output
Here's what I've done:
No need for negative margin on div.
Set margin to 0 on the inputs
Make sure the text fits on 1 line.
Align the checkbox to the left.
I have the following HTML:
<label class="my-class" for="_something">Text Number 1</label>
<label class="my-class" for="_something">Number 2 Text</label>
Basically I have 2 labels with identical class and also identical for= attributes
I know that I can target the attribute by:
label[for="_something"] {
/* input */
}
But how can I differentiate the 2 of them?
Basically I need to use the CSS to hide the second label.
Can I target the attribute by the "name text"? "Number 2 Text" in this example?
It IS indeed possible with CSS. Just use nth-of-type().
HTML:
<label class="my-class" for="_something">Text Number 1</label>
<label class="my-class" for="_something">Number 2 Text</label>
<label class="my-class" for="_something">Number 3 Text</label>
<label class="my-class" for="_something">Number 4 Text</label>
CSS:
label[for="_something"]:nth-of-type(2) {
display: none;
}
PHPFiddle Link: http://jsfiddle.net/ua91bf0b/
Please note: This is a CSS3 feature, and will not work with some of the old browsers.
If you want to hide the label based on it's text (Number 2 Text) then you need to use jQuery. It's "almost" the same since you use css selectors too in jQuery.
$('label[for$="_something"]:contains("2")')
this one for example takes the labels where the for tag ends with "_something" (so it's good with 123_something and asd_something too) adn the label text contains "2".
You can make a function for this for easier use:
function HideLabel(forattr, texttosearch) {
$('label[for$="'+forattr+'"]:contains("'+texttosearch+'")').css('display','none');
}
And use it like:
HideLabel('_something', '2');
This question already has answers here:
How to position two elements side by side using CSS
(12 answers)
Closed 8 years ago.
I want to archieve the following:
I have a text wrapped in a p-tag and a submit-button together with a hidden input-field wrapped in a form-tag.
I want the text in the <p> tag and the button to appear in the same line, how can I do this (with css)?
<p>This is a example message text.</p><form method="POST"></input><input type="hidden" name="delete_message_id" value=" 1 "></input><input type="submit" value="delete"></input></form>
Since I want the hidden input field to be sent along with the submit event, I can not just leave away the wrapping form-tag.
Both <p> and <form> elements are displayed as block elements by default.
Change the 'display' CSS property to have them display inline:
p, form{
display: inline-block;
}
Also, <input> tags are self-closing; you don't include </input>. (Even you did, you have a further invalid </input> tag right after opening your <form>).
JSFiddle
try adding this css style
<style>
p {
display: inline;
}
</style>
or just set the element style
<p style="display: inline;">This is a example message text.</p><form method="POST"></input><input type="hidden" name="delete_message_id" value=" 1 "></input><input type="submit" value="delete"></input></form>