<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
<div style="display:inline; margin-left:10%;">
<input type="radio">
<span></span>
</div>
Hello I have a layout similar to the one above. I have some other things in the php file, but they are irrelevant. For example every new 5th element causes a new line (br), which will make sense when you see the pictures.
Here is an image representation of the outcome:
This is what I need :
How can I possibly do this, I will appreciate any idea. Cheers.
Note: Span tags contain the text next to the radio buttons.
iyi akşamlar :) you can remove div's, create class inside radio buttons and put them altogether into container for each row.
LIVE DEMO HERE
<div class="container">
<input type="radio" class="radyo">
<div class="text">a2</div>
<input type="radio"class="radyo">
<div class="text">a3</div>
<input type="radio"class="radyo">
<div class="text">a4</div>
<input type="radio"class="radyo">
<div class="text">a5</div>
</div>
<div class="container">
<input type="radio"class="radyo">
<div class="text">beyler ben geldim</div>
<input type="radio"class="radyo">
<div class="text">tamam</div>
</div>
First of all, avoid using inline styles.
If you want the result in the second image, simply define width for each element instead of margin.
<div style="display:inline-block; margin-left:10%; width:15%;">
or set the margin-left and width as you see fit.
I'd suggest a nested div pattern, where you can utilize precised columns without margin/padding and insert a div that hold the margin/padding as desired. Then push your checkboxes into each nested div. I'd also suggest using a <label> over <span> (as it is a span with some extra properties) (MDN Label)
.cols {float:left;width:25%} //Set columns up, without margin/padding so they align as expected in 4.
.col {margin-left:10%;} // Inner column with margin/padding etc.
<div class='cols'>
<div class='col'>
<input type='radio' name='radio1' /><label for='radio1'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio2' /><label for='radio2'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio3' /><label for='radio3'></label>
</div>
</div>
<div class='cols'>
<div class='col'>
<input type='radio' name='radio4' /><label for='radio4'></label>
</div>
</div>
If you have the width of your outer container, it would be easier for you to align fixed-sized divs inside it. For example if we have a div with width: 300px;, and we want 3 radio boxes on a row, we specify width: 100px; for them. Add float: left; and it should work out well for you.
Here's a live demo.
If fixed width doesn't suit you, there are many other approaches to do this, I can share if this doesn't work for you.
Related
I have a problem in my html code. I have "Title" , "Firstname" and "Surname" and I need an input box bellow them to be completed by users. these input boxes are defined in my form generator as fields (e.g. [en_title])
Now when I write down the html code to show the output, the blocks are placed under each other. I want to place them near each other and when I use float in my div style, they place near each other BUT the input boxes shrink, while in first case the input boxes don't shrink.
Please give me a solution for this issue that the blocks placed near each other and the boxes don't shrink. thanks
<div>
Title <br />
[en_title]
</div>
<div>
Firstname <br />
[en_fname]
</div>
<div>
Surname <br />
[en_sname]
</div>
Use display:inline-block; instead of float
div{
display:inline-block;
}
<div>
Title <br />
<input type="text"/>
</div>
<div>
Firstname <br />
<input type="text"/>
</div>
<div>
Surname <br />
<input type="text"/>
</div>
So you have 3 div that you want to place near each other horizontally.
the width of the div which contain all these div is 100%.
So each div have a 100/3 % width.
It works as Bootstrap for example.
You can do that like this
Run the snippet
.your-block {
float: left;
width: 33.33333%;
}
<div class="your-block">
<label for="title">Title </label> <br />
<input id="title" type="text"/>
</div>
<div class="your-block">
<label for="firstname">firstname </label> <br />
<input id="firstname" type="text"/>
</div>
<div class="your-block">
<label for="surname">surname </label> <br />
<input id="surname" type="text"/>
</div>
you will need to use width and also use position:absolute so that you can move your control anywhere with margin-left:10px or margin-top:10px whatever in your case. Also it would be helpful if you share your css code for the same.
Better solution:
Don't use divitis for this, use labels and input fields:
HTML:
<form>
<label> Name <input type="text"> </label>
<label> Email <input type="email"> </label>
</form>
CSS:
form{display: flex}
This way you have semantic HTML and achieve the look you want.
A good overview on what can be done with flexbox is on css-tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm designing a footer on a HTML webpage with a radio-selection form on it. I have some buttons inside the footers div, centered using <center>. Without the form on it, it works 100%. I can't get the form to display next to the other buttons, without using float: right; in the stylesheet. When I use float, it is inconsistently dynamic with the rest of the buttons in the div. I've tried setting fixed heights, but I want it to be dynamic. So how can I get the form to display next the the links, in the same way that the links display next to each other?
JSFiddle: https://jsfiddle.net/o78s2s18/
Diagram:
You could put both groups of elements inside their own <div> and float them both to the left.
<div style="float:left;">
<a id="BtnStyle" href="example.com">10 Views</a>
<a id="BtnStyle" href="http://mirum.weebly.com/">About</a>
<a id="BtnStyle" href="http://SD-Storage.weebly.com/#MirumFooter">SD-Storage</a>
</div>
<div style="float:left">
<form action="#" width="200px" class="ThemeSelector">
<input name="group1" type="radio" id="test1" class="red" />
<label for="test1">Test 1</label>
<br>
<input name="group1" type="radio" id="test2" class="red" />
<label for="test2">Test 2</label>
</form>
</div>
Here's an example
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />
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>
I am trying to align text fields in a div and make them float left so that they look like a table.
I want a layout like below:
Label1: TextField Label2: TextField Label3: TextField
Label4: TextField Label5: TextField Label6: TextField
I tried to do this but it just won't come out correct. http://jsbin.com/izuwi3/edit
I put this together really quickly, so it can definitely be improved upon, but how about something like this?
http://jsfiddle.net/LBcp5/1/
What I'm doing is essentially creating a container for what would be a row in a table. The way I'm doing this is as follows:
<div class="row">
// put whatever you want in here
</div>
... and I'm styling this row class with clear: both so that each row will be on its own line. You can add <div> elements within each row, as many as you want, and floating them to the left or using display: inline to get the effect you want.
So when you want multiple rows, you create multiple of these row containers. Check out the jsFiddle demo above for an example.
I hope this helps.
Maybe you are looking for something like this?
HTML:
<form>
<div id="wrapper">
<div id="left">
<div class="label-container">
<label for="label1">Label1</label>
<input name="label1" type="text">
</div>
<div class="label-container">
<label for="label4">Label4</label>
<input name="label4" type="text">
</div>
</div>
<div id="center">
<div class="label-container">
<label for="label2">Label2</label>
<input name="label2" type="text">
</div>
<div class="label-container">
<label for="label5">Label5</label>
<input name="label5" type="text">
</div>
</div>
<div id="right">
<div class="label-container">
<label for="label3">Label3</label>
<input name="label3" type="text">
</div>
<div class="label-container">
<label for="label6">Label6</label>
<input name="label6" type="text">
</div>
</div>
</div>
</form>
CSS:
#wrapper
{
width: 800px;
}
#left,
#center,
#right
{
float: left;
}
.label-container
{
margin: 10px 10px;
}
:)
Well, you can for example put each column in a fieldset tag, set it's display attribute to block, float to left and set width to desired value.
i think it'll allways end using some tag like span or div to group those fields, however the fieldset tag is the most desired one cause it's invented exactly for grouping form fields :)
you can do this:
<div style="clear:both;">
<div style="float:left;">
<label for="TextField1">Label1:</label>
<input id="TextField1" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField2" style="padding-left:50px">Label2:</label>
<input id="TextField2" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField3" style="padding-left:50px">Label3:</label>
<input id="TextField3" value="TextField"></input>
</div>
</div>
<div style="clear:both;">
<div style="float:left;">
<label for="TextField4">Label4:</label>
<input id="TextField4" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField5" style="padding-left:50px">Label5:</label>
<input id="TextField5" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField6" style="padding-left:50px">Label6:</label>
<input id="TextField6" value="TextField"></input>
</div>
</div>
Use this html tag
align="center"
center can be substituted for left or right if you want not to position them on the center
The proper way to do it is by linking your html to a CSS file and assign each div to a certain type of class in the CSS file, this helps you avoid redundancy. To do so create a css file and
link it to the html by including this in your html code
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
And then in your mystyle.css file you would have to include something like this
DIV.Left{text-align:left;}
DIV.Center{text-align:center;}
DIV.Right{text-align:right;}
Then your html file divs would look like
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>