I have a two input text
<form action="process.php" method="get">
Link <input placeholder="Link" type="text" name="c">
<p>
<br>
Password <input placeholder="Password Admin" type="text" name="p">
<p>
<br>
<input type="submit">
</form>
result:
How to align in this mode?
like this
Wrap your text inside label elements with divs, and your inputs into another set of divs. Easy to modify their stylings then:
<form action="process.php" method="get" id="yourform">
<div class="labels">
<label for="c">Link</label>
</div>
<div class="inputs">
<input placeholder="Link" type="text" name="c">
</div>
<div class="labels">
<label for="p">Password</label>
</div>
<div class="inputs">
<input placeholder="Password Admin" type="text" name="p">
</div>
<br>
<input type="submit">
</form>
CSS:
.labels {
width: 150px;
text-align: right;
float: left;
margin-right: 5px
}
See the demo - jsfiddle
Related
I am trying to beautify a form in bootstrap. I don't understand why I can not add some margin to a hyperlink thats below an input? I tried to remove bootstrap and that didn't work, so I don't think it has something to do with bootstrap!
https://jsfiddle.net/k8ws75je/
<div class="col-md-8 col-md-offset-2">
<form class="form-horizontal" role="form" method="POST" action="{{ route('register') }}">
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div>
<div class="col-md-6 col-md-offset-4">
<a id="linkpassword" href="#">Change Password</a>
<button type="submit" class="btn btn-success pull-right">
Update
</button>
</div>
</div>
</form>
#linkpassword{
margin-top: 400px;
}
That's because a elements are inline elements, which cannot have vertical margins. Change it to an inline-block to make it work
#linkpassword{
margin-top: 200px;
display: inline-block;
}
https://jsfiddle.net/knu1badd/1/
#linkpassword{
margin-top: 400px;
position:absolute;
}
Make it display: block. Thus it will be as you want.
warp a element in a div block and apply the position/margin on this block.
Because a is an inline element.
<div class="margin-top">
<a id="linkpassword" href="#">Change Password</a>
</div>
I've just recently asked this and it worked previously but now it doesn't again. I have 2 divs (student-parent-container and student-guardian-other-container) I want positioned side-by-side using inline: block and if possible without using float.
Here is the HTML:
<div id="parent-and-guardian" class="tab">
<div id="student-parent-guardian-container">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
</fieldset>
</div>
</div>
</div>
and here is CSS:
#student-parent-container
display: inline-block;
}
#student-guardian-other-container
display: inline-block;
}
Here is a link to a jsFiddle:
Divs not positioning side-by-side
I would like for Guardian Information be on the right side of Father Information.
You didn't open the { in the css rules.
CSS
#student-parent-container {
display: inline-block;
vertical-align: top;
}
#student-guardian-other-container {
display: inline-block;
}
I updated your JS Fiddle, also adding a vertical-align to the guardian div:
https://jsfiddle.net/LinoLinux/7x8xde43/2/
I trying to make a div display beside another div using "display: inline". However, I can't seem to make it work. I have a parent div (parent-and-guardian) with 2 divs inside (student-parent-container and student-guardian-other-container). I am trying for this 2 divs to be displayed side by side.
<div id="parent-and-guardian" class="tab">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
</div>
Here is the CSS:
#student-parent-container {
display: inline;
}
#student-guardian-other-container {
display: inline;
}
I'd like for the Guardian Information to be on the right side of Father Information and Mother Information.
Here's a link to jsFiddle: Test
For native-block elements it's better to apply display: inline-block; than element will still take block element display effect (like setting height for inline elements does nothing, while block elements height does change). Also your blocks may lead to different top position on page. That's why I added vertical-align: top (for inline and inline-block elements only):
#student-parent-container {
display: inline-block;
vertical-align: top;
}
#student-guardian-other-container {
display: inline-block;
vertical-align: top;
}
<div id="parent-and-guardian" class="tab">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
</div>
#parent-and-guardian {
display: flex;
}
it will cause it to display side by side. Check out https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
What is the most elegant (ie. non-hacky) way to properly align a group of checkboxes, one or more of which have associated text inputs? Whatever I have tried, I end up with (i) unevenly spaced checkboxes, or (ii) misaligned checkboxes, or (iii) misaligned labels, or (iv) misaligned text boxes.
Since the use case of:
What is your favourite food?
(a) Apple
(b) Banana
(c) Carrot
(d) Other: _______
is surely very common, I wonder whether anyone has found a way to do this with Bootstrap standard classes, before I start forcing my own classes into the code.
Here is the code I have now:
<div class="form-group">
<label class="col-sm-2 control-label">
Favourite food
</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Apple
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Banana
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Other <input type="email" placeholder="someone#somewhere.com" class="form-control"/>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/> Any fruit from one of these colour groups: Red, Green, Blue
</fieldset>
</label>
</div>
</div>
</div>
Screenshot attached showing output in Chrome:
The fourth checkbox is too far from the third, while the text and 'input type=text' on the third line are too low.
Yes, there is a simple bootstrap way, just change the code of the checkbox to this:
<div class="checkbox">
<div class="form-inline">
<label>
<input type="checkbox"/>
Other
</label>
<input type="email" placeholder="someone#somewhere.com" class="form-control"/>
</div>
</div>
Working Example
Here's one way to achieve what you're trying to do. The only change which I've made to your HTML structure is that I've wrapped the description for each checkbox inside a <span> tag and added used this CSS:
input[type="checkbox"] {
position: relative !important;
display: inline-block;
vertical-align: text-bottom;
}
span {
display: inline-block;
vertical-align: middle;
}
Here's a working demo:
input[type="checkbox"] {
position: relative !important;
display: inline-block;
vertical-align: text-bottom;
}
span {
display: inline-block;
vertical-align: middle;
}
.form-inline .form-control {
padding-top: 0px;
padding-bottom: 0px;
height: 20px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="col-sm-2 control-label">Favourite food</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Apple</span>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Banana</span>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Other</span>
<input type="email" placeholder="someone#somewhere.com" class="form-control" />
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Any fruit from one of these colour groups: Red, Green, Blue</span>
</fieldset>
</label>
</div>
</div>
</div>
I have two divs nested inside another and no matter what I have tried I can't get the second nested div (bookmarklet-wrapper) to float beside the first(form-wrapper)? I thought maybe it was something to do with the widths but this didn't help and also tried using a "clearfix" but this still didn't help.
My HTML is as follows:
<div id="prof-wrapper">
<div id="editprofile-form-wrapper">
<div id="title">
<h1>Edit Profile</h1>
<p>This information appears on your personal user page</p>
</div><!--End of title-->
<div class="form-horizontal">
<?php if(isset($image)){echo $image;}?>
<div id="thumbs" style="width:300px"></div>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="firstname">Firstname</label>
<div class="controls">
<input id="firstname" type="text" name="fname">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="lastname">Surname</label>
<div class="controls">
<input id="lastname" type="text" name="secound">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input id="email" type="text" name="email">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="user_location">Location</label>
<div class="controls">
<input id="user_location" type="text" value="" name="user[location]">
<p>Where art thou?</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="bio">Bio</label>
<div id="user_description_box" class="controls">
<textarea id="bio" class="input-xlarge" name="bio" style="width: 243px; height: 122px;"></textarea>
<p class="bio-label">About yourself in<strong>160</strong>characters or less.</p>
</div>
</fieldset>
<div class="form-actions">
<button id="submitButton" class="btn primary-btn" type="submit" name="submit">Save changes</button>
</div>
</form>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="photoimg">Profile photo upload</label>
<div id="user_description_box" class="controls">
<input id="photoimg" type="file" value="" name="photoimg">
<input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
<!--<p class="bio-label">About yourself in <strong>160</strong> characters or less.</p>-->
</div>
</fieldset>
<div class="form-actions">
<input type="submit" class="btn primary-btn" id="photoSubmit" name="submit" value="Photo Submit" />
</div>
</form>
</div><!--End of horizontal form-->
</div><!--End of form wrapper-->
<div class="clearfix"></div>
<!-----------------------------------------Start of bookmarklet-------------------------------------------------->
<div id="bookmarklet-wrapper">
<h1 id="welcometext">Welcome to <img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/></h1>
<h2 id="bminstructions">The Bookmarklet below should be dragged to your bookmarks bar so that you can share content with your friends on <!--<img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/>
<a style="text-decoration:none;
background:#25A6E1;
background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9;
position: relative;
top: 20px;"
href="javascript:
(function () {
function loadjscssfile(filename, filetype){
if (filetype=='js'){
var fileref=document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('id','jsDoc');
fileref.setAttribute('src', filename);
}else if (filetype=='css'){
var fileref=document.createElement('link');
fileref.setAttribute('rel', 'stylesheet');
fileref.setAttribute('id', 'cssDoc');
fileref.setAttribute('type', 'text/css');
fileref.setAttribute('href', filename);
}
if (typeof fileref!='undefined')
document.getElementsByTagName('head')[0].appendChild(fileref);
}
var cssDoc = document.getElementById('cssDoc');
if (cssDoc == null){
loadjscssfile('http://www.netsushi.net/css/css/bookmarklet.css', 'css');
}
var jsDoc = document.getElementById('jsDoc');
if (jsDoc == null){
loadjscssfile('http://www.netsushi.net/js/bookmarklet.js', 'js');
}else{
if ($('#feeder_bm_main').is(':visible')){
$('#feeder_bm_main').hide();
}else{
$('#feeder_bm_main').show();
}
}
void(0)
}())
;"-->
>NetSushi</a>
</div><!--End of bookmarklet wrapper-->
</div><!--end of edit-page-content-->
I'm still unsure how to correctly format my CSS to post it but you can see exactly what is going on in this fiddle if you have a moment to help me out?
http://jsfiddle.net/DannyW86/3gMuP/
If you simply add float: left to your form-wrapper, it should work : http://jsfiddle.net/3gMuP/1/
You can also use display:inline-block; in the 2 divs you want to have next to each other.
This works for me:
#editprofile-form-wrapper {
width: 50%;
float: left;
}
I don't have any other CSS what-so-ever ... and the 2 columns now sit next to each other.