I'm putting together a simple form to deposit a set amount of money. The form has 4 radio buttons.
<form action="deposit.php" method="post">
<fieldset>
<div class="form-group">
<input type="radio" name="deposit" value="100"> $100
<br>
<input type="radio" name="deposit" value="250"> $250
<br>
<input type="radio" name="deposit" value="500"> $500
<br>
<input type="radio" name="deposit" value="1000"> $1,000
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Deposit</button>
</div>
</fieldset>
</form>
Here is the output:
You can see that the last radio button is not vertically aligned. I realize that there are 2 extra characters in the text after the button. I'm no CSS wizard and haven't really found the answer to making these buttons straight. Any ideas?
EDIT: CSS code here:
.container {
/* center contents */
margin-left: auto;
margin-right: auto;
text-align: center;
}
input[type='radio'] {
width: 20px;
}
The form is in the container
In your CSS file or within your HTML code you are using the "align centre" setting. Thats why is not aligned.
This is the output of your above code with the align centre setting:
And this is the output of your code without the align centre setting:
Somewhere in your code you are setting the below div class to align centre.
// Removing the align setting will solve the issue. If its not in-line CSS then check you external CSS file.
<div class="form-group" align="center">
Hope this helps.
Why not use tables to make the buttons align (its easier with dreamweaver as your editing tool)
Related
I'm using Bootstrap 3 and trying to center a radio button, an icon, and some text and am having no luck.
My form simply is simply stuffing everything inside a label tag which seems to be a lot.
The skeleton code I started with is below:
<form role="form">
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconOne"></div>
<br/>
Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconTwo"></div>
<br/>
Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">
<br/>
<div class="iconThree"></div>
<br/>
Icon Three
</label>
</form>
Here's the JS fiddle:
http://jsfiddle.net/4zh28rcn/4/
I'm tempted to try something like Flexbox but am wary of importing more third party libraries.
Thanks for any helpful pointers!
I'm not sure where it's coming from, but you appear to have a stray alignment pushing the <input> 20px to the left of where it ought to be.
If you add the CSS below to what you have in your fiddle already, you will see the radio buttons, the icon images and the text all centered and all lined up:
.radio-inline {
width: 100px;
padding: 0;
text-align: center;
}
input {
display: block;
position: relative;
left: 20px;
width: 100%;
}
group to align a label and an input box. The idea is to put the label and the input box in different lines. The code snippets are like:
<form>
<div class="form-group">
<label for="input">Please enter names, separated by space:</label>
<div>
<div class="col-xs-8">
<input type="text" class="form-control" id="input" placeholder="Enter up to 10 names to search" ng-model="vm.searchRaw">
</div>
<div class="block-align-right">
<button class="btn btn-primary" style="width: 120px" ng-click="vm.search()" ng-disabled="vm.notEntered()">Search</button>
</div>
</div>
</div>
</form>
The divs inside the form group is mainly to align the input box and the button to one line. Now the problem is: the left edge of the label and the left edge of the input box don't align; the input box shifts to the right a bit. Without using padding how can I fix this? Or is it built in for the form-group? Thanks!
Use this type
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
Add class to label. like:
<label class="col-xs-10" for="input">Please enter names, separated by space:</label>
Will solve your issue.
Because bootstrap class will add padding-left:15px.
Check image below.
Working Fiddle
Seems like you are using bootstrap. Just modify the <label> line as follows:
<label for="input" class="col-xs-12">Please enter names, separated by space:</label>
I have this code below which I have built in order for it to be ALL on the same line. Problem is, for some reason the form input field is several spaces away from the label. Thus something like this happens:
https://jsfiddle.net/pswLLhru/
Any help so as to remove the extra spacing between the two input fields?
Thank you
label {
display:inline-block;
width: 130px;
}
<div class="block">
<label>Currently I am </label>
<input type="text" id="labelinput" style="width:60px;"/>
<label> in </label>
<input type="text" id="labelinput" style="width:60px"/>
</div>
Just deleting your CSS:
label {
display:inline-block;
width: 130px;
}
will remove the white space from your inputs and show your div with the 2 inputs on the same line.
Also I would recommend indenting your code to make it easier to read in larger/future projects.
Delete the width in your css and use comments in your markup
<div class="block">
<label>Currently I am </label><!--
--><input type="text" id="labelinput" style="width:60px;"/><!--
--><label> in </label><!--
--><input type="text" id="labelinput" style="width:60px"/>
</div>
Sounds easy but say I'm using bootstrap and the input box has a label, when I resize the text underneath is not centered.
Here's some simple html to demo:
<form action="http://google.com">
<div>
<label for="inputBox">Email address</label>
<input name="email" type="text" id="inputBox"/>
<br>
(Center under input)
</div>
</form>
The label should be associated with the input textbox, the text '(Center under input) should appear under the input box in the middle.
So ideally the (Center under input) text should be glued centrally underneath the input textbox while the label acts normally.
Is this possible? I'm trying with a table (of all things) at the moment but can't get it to behave, I've tried positioning etc. still no luck.
Any help is much appreciated.
If you want to centre things relative to each other, then they should generally be placed in a container.
div,
label {
display: inline-block;
vertical-align: top;
}
div {
text-align: center;
}
<form action="http://google.com">
<div>
<label for="inputBox">Email address</label>
<div>
<input name="email" type="text" id="inputBox" />
<br>(Center under input)
</div>
</div>
</form>
Your example content is too abstract to tell, but your centred content should probably be another label element if it is associated with the input.
You can kill 2 birds with one stone - have an accessible input that is compatible with screen readers, and center your text, using this markup structure:
label {
max-width:300px;
display:block;
}
label span {
text-align:left;
display:block;
}
label input {
width:100%;
}
<form action="http://google.com">
<label>
<span>Email address</span>
<input name="email" type="text" id="inputBox"/>
<span style="text-align:center">center me</span>
</label>
</form>
Notice you don't need the for attribute. It's a clean way to accomplish accessibility. Some simple CSS aligns the text. If you don't want to use inline styles, you could always write another class.
I'm a CSS/HTML novice and I haven't really found how to do this by searching. I have a simple login page where a person enters in a username and password. The page has a large background image. I want to create a rounded box that the two text fields (username and password) and the submit button goes into and sits on top of to further separate form the background image. Here is the main part of the html file, I just want to know what should I put into the container section of the CSS file to get a rounded white box .
<div class="container">
<form class="form-signin" role="form" name='f'
action='${pageContext.request.contextPath}/j_spring_security_check' method='POST'>
<h2 class="form-signin-heading">Please sign in</h2>
<input type='text' name='j_username' class="form-control" placeholder="Username"
required autofocus>
<input type='password' name='j_password' class="form-control"
placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
As far as a box goes, you can just create a div for that(as I see you've done: .container). To round the corners, you'll want to use the CSS property border-radius:
HTML:
<div id="example1">Hello!</div>
CSS:
#example1 {
width: 100px;
background: green;
border-radius: 15px;
margin: 0 auto;
text-align: center;
}
JSFiddle Example
It appears you have a bootstrap example. First, you need to use bootstrap (http://getbootstrap.com) then add a class that suits you best to container. I recommend the classes "well", "thumbnail", and "jumbotron". Visit the CSS section on the bootstrap site to see these rendered. If you don't want to use bootstrap, just copy the CSS code and apply it to your example.