I'm aware this may seem like a stupid question that every should know. But I just can't for the life of me work it out.
The look I need to achieve is:
| == radio button
|Terrorists nice even spacing here |Counter-Terrorists
I have these radio buttons:
Image
But what i need is for them to be equally spaced while staying in the dead center of the page.
Ive messed around with them for ages to no avail.
HTML:
<input type='radio' id='choice' value='terrorist' class='radiopick'>Terrorist's
<input type='radio' id='choice' value='countert' class='radiopick'>Counter-Terrorist's
CSS:
input.radiopick{
}
try this.
HTML
<form>
<div class="radiopick">
<input type='radio' id='choice' value='terrorist' />Terrorist's</div>
<div class="radiopick">
<input type='radio' id='choice' value='countert' />Counter-Terrorist's</div>
</form>
CSS
form {
display:flex;
text-align:center;
}
form .radiopick {
justify-content: center;
width:150px;
margin: auto;
}
Have you thought of using tables? Although I don't fully understand the question, if you want even spacing for each box you could do something like:
<!DOCTYPE html>
<html>
<body>
<table style="width:300px" align="center">
<tr>
<td><input class="radiopick" type="radio" name="test" value="yes" />Terrorist</td>
<td><input class="radiopick" type="radio" name="test" value="yes" />Counter-Terrorist</td>
</tr>
</table>
</body>
</html>
An example can be found here
Related
So I'm pretty new to HTML and CSS in general and I've been struggling to remove the white borders around my radio group. But I'm not sure how to remove them, I've also tried playing around with CSS to solve it but to no avail. Thanks in advance for helping.
What I'm talking about
Here's the HTML I'm using.
<fieldset id="group2">
Do you play games on a daily basis?
</br>
<label for="yes">Yes</label>
<input type="radio" value="Yes" name="yes">
<label for="no">No</label>
<input type="radio" value="No" name="no">
</fieldset>
Just add below css :
fieldset {
border: 0;
}
As you can see in the image below, the table contents are so long and the last td content is hideous. (Sorry for local language, but trust me, the content is not important.)
What I want is hide checkbox titles using only CSS. It's very hard to not output title 'cause it's rendered automatically by a well-encapsulated module. And I don't want to tamper with it. I was successful to add hide-title class to input itself as follows:
Is it possible to hide checkbox text only using this advantage?
Following is my html:
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<label>
<input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1">
両面印刷可能 <!-- Hide this text with custom class -->
</label>
</div>
</div>
</td>
and each tdhas an id starting with result_box__is_duplex. I believe the template uses Bootstrap v3.0. Thank you for paying attention.
You could use an attribute starts with selector - [attr^=value] to target the td you want:
td[id^="result_box__is_duplex"] .checkbox label {
font-size:0;
}
<table>
<tr>
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<label>
<input type="checkbox" class="hide-title" id="form_product_classes_0_is_duplex" name="form[product_classes][0][is_duplex]" value="1">
両面印刷可能 <!-- Hide this text with custom class -->
</label>
</div>
</div>
</td>
</tr>
</table>
Are you able to add the .hide-title to the label element and not the input element? You can then use this, but it's still quite hacky.
.hide-title {
font-size: 0;
}
I have a suggestion.
Let's change HTML structure a little bit different.
<td id="result_box__is_duplex--0">
<div class="checkbox-inline">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox_id" value="value"/>
<label id="label_id" for="checkbox_id">Text</label>
</div>
</div>
</td>
then you can apply CSS there the way you expect
/***** CSS ******/
label#label_id {
display: none;
}
You can try the below code.
<label style="font-size:0"><input type="checkbox" id="check1">Option 1</label>
I have 3 radio buttons on the same line in a td of the table like that:
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
Now I would like to add some spaces between those radio buttons and I don't know how to do it.
I tryed to use width attribute, margin attribute but nothing changes.
Thank you very much.
Check working example on jsbin
Also, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>
CSS:
input[type="radio"]{
margin: 0 10px 0 10px;
}
Use like this in CSS
input[type="radio"]{
//padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}
Try this:
input[type="radio"]{margin:10px 0};}
put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:
<style type="text/css">
input[type="radio"]{margin: 10px 0};}
</style>
Hope this helped!
If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.
HTML:
<label>CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>
CSS:
<style type="text/css">
label + label {
margin-left: 20px;
}
</style>
http://jsfiddle.net/9cJJ9/
Can somebody give a simple solution as to how to align form inputs on the same line,
for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?
ex:
<style type='text/css'>
form{
display:inline;
}
textarea{
font-size:25px;
height:25px;
width:200px;
}
input.button{
height:25px;
width:50px;
}
</style>
<form>
<textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>
Have you tried playing with the vertical-align css property?
vertical-align:top;
That way everything will look consistent and you won't have to play with margins.
textarea,input.button{display:inline-block;}
or
textarea,input.button{float:left;}
take your pick depending on which way your vertically challenged
Adding a vertical-align seems to work for me:
<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>
You can usually use display:inline-block; or float:left; Are you wanting items to be alighed at the top or bottom?
In your example you haven't closed the input type, it should be type='button' - you're missing an apos.
Just give float:left to the textarea
http://jsfiddle.net/2qdJc/2/
<table>
<tr>
<td><input /></td>
<td><input /></td>
</tr>
</table>
Sure, it makes the CSS purists squirm, but it's certainly easy...
You can do something like this ( worked in my case ):
<div style="width:150px"><p>Start: <input type="text" id="your_id"></p>
</div>
<div style="width:130px;margin-left: 160px;margin-top: -52px">
Button
</div>
Here is a demo: http://jsfiddle.net/gn3qx6w6/1/
For me i used a div and put all inputs in div and used vertical-align:top; for div
<div style="vertical-align:top">
<span id="FromDate">From Date</span><input id="FromDatetext" style="margin-left:10px" type="text" name="startdate" />
<span id="ToDate"> To Date</span><input id="ToFatetext" type="text" name="enddate" />
<input id="Submit1" type="submit" value="Search" class="btn btn-dark" />
</div>
I'm still having a hard time not wanting to use Tables to do my Details View Layout in HTML. I want to run some samples by people and get some opinions.
What you would prefer to see in the html for a Details View? Which one has the least hurddles cross browser? Which is the most compliant? Which one looks better if a I have a static width label column that is right aligned?
By Details view i mean something similar to the following image.
Table
<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>
Fieldset
<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>
Divs
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>
List
<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>
Those approaches aren't mutually exclusive, personally I'd mix them up a bit:
<fieldset>
<label for="name">XXX <input type="text" id="name"/></label>
<label for="email">XXX <input type="text" id="email"/></label>
</fieldset>
Although to get a right aligned label (something I'd personally avoid because it's harder to scan visually) you'll need to have an extra element around the text that isn't around the input, so I'd go for
<fieldset>
<div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
<div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>
Actually I take that back for simple textbox only inputs I find that the Fieldset option works well.
However, typically I will have multiple controls in a single "row", therefore I go with the div based layout, that way I can put inputs, validators and all into a single element.
I prefer the fieldset containing divs. The label divs are float:left; width:20em and the content divs just have a fixed left margin of 21em or 22em for example. But you have to remember to include a clear div for that to work:
<fieldset>
<div class="labels"><label for="name">Name</label></div>
<div class="data"><input ....</div>
<div style="clear:both"/>
// repeat for next fields
</fieldset>
CSS:
label{
float:left;
text-align:right;
width:115px;
margin-right:5px;
}
input{
margin-bottom:5px;
}
HTML:
<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />
Obviously you then can add a div or use the form around it to get a background-color for your whole form etc.
I find that forms are one of the hardest thing to deal with in css because if you're wanting tight control, there's often a lot of css to add that old school HTML would take care of for you. However, if you're willing to accept a uniform natural treatment, then the cleanest way to separate the content and presentation would be:
form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }
<form>
<fieldset id="details">
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
<div id="item1div">
<label for="item1">item1 label</label>
<input type="" id="item1" />
</div>
</fieldset>
</form>
You CAN use tables to format forms tabularly but use CSS to add styles to the forms. CSS purists will probably say that you shouldn't but the reality is that many browsers often render CSS forms differently and can cause accessibility issues. A table-based form is much more consistent across browsers and much more accessible as well.