here is my code:
<div class="form-group">
<label class="control-label col-sm-4">Name</label>
<div class="col-sm-8"><input type="text" class="form-control" id="id_name" required/>
<span style="color: red; background-position: right top;">*</span>
</div>
but that sign display under the textbox, how to fix the position of asterisk sign at top right.
you should check wether other elements or elemnt clarifications in your CSS have influence on the behavior of your code. Since the code as it is works just fine.
the use of "float" often dearanges code. So if you use float a lot it could be the cause. "display:block" or other displays can help avoiding those affections.
But as said befor you should clarify your problem more.
#marker {
position: relative;
left:-15px;
top:2px;
}
<div class="form-group">
<label class="control-label col-sm-4">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="id_name" required/>
<span id="marker" style="color: red; background-position: right top;">*</span>
</div>
Check this. i think u need it like same. Use font awesome to put asterisk mark
<div class="form-group">
<label class="col-sm-3 control-label">
Username <i class="fa fa-asterisk" aria-hidden="true"></i>
</label>
<div class="col-sm-7">
<input class="form-control" id="username" name="username" placeholder="Text Field" type="text">
</div>
</div>
Related
I am making a copy of a pen-and-paper character sheet for a RPG, as a way of learning html/css. However I got stuck right at the beginning when trying to style a form, holding some background information about the character.
Currently I've managed to make my form of labels and input-fields to look like the picture to the left. However the pen-and-paper character sheet (and the desired look) is formatted like the one on the right.
Below is the code I'm using.
.sheet-character-background form input,
label {
margin-bottom: 10px;
}
.age-input {
width: 60px;
}
<div class="sheet-character">
<div class="sheet-character-background">
<form>
<label>Name</label>
<input type="text" name="attr_name">
<br>
<label>Race</label>
<input type="text" name="attr_race">
<br>
<label>Gender</label>
<input class="gender-input" type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
<br>
<label>Religion</label>
<input type="text" name="attr_religion">
<br>
<label>Occupation</label>
<input type="text" name="attr_occupation">
<br>
<label>Archetype</label>
<input type="text" name="attr_archetype">
<br>
<label>Environment</label>
<input type="text" name="attr_environment">
<br>
<label>Background</label>
<input type="text" name="attr_backgrund">
</form>
</div>
</div>
What are the steps for going from what I have to what I want? I played around with surrounding each "row" with a <div> and class and setting their width in css. However this didn't work out so I reverted to my initial version and got stuck.
Many people would probably suggest to get a css framework, but what you want can be done with some simple css.
First, your html basically consists of a form with a series of rows, except for one row where it consists of two fields in one row. So I modified your html slightly that each row is wrapped by a div with a class as .form-row and delete the <br> (let css to do the rendering instead of using html tag):
To achieve what you want will then come down to set a width for the form, and how each row will behave, and set the width of input, and last override the setting for the special case of .age-input.
This is just a 'quick-and-dirty' way to achieve what you want, hopefully it provide you some ideas and suggestions in your learning.
form {
width: 300px;
}
.form-row {
display:flex;
}
input {
width: 100%;
}
.age-input {
width: 60px;
}
<form>
<div class="form-row">
<label>Name</label>
<input type="text" name="attr_name">
</div>
<div class="form-row">
<label>Race</label>
<input type="text" name="attr_race">
</div>
<div class="form-row">
<label>Gender</label>
<input type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
</div>
<div class="form-row">
<label>Religion</label>
<input type="text" name="attr_religion">
</div>
<div class="form-row">
<label>Occupation</label>
<input type="text" name="attr_occupation">
</div>
<div class="form-row">
<label>Archetype</label>
<input type="text" name="attr_archetype">
</div>
<div class="form-row">
<label>Environment</label>
<input type="text" name="attr_environment">
</div>
<div class="form-row">
<label>Background</label>
<input type="text" name="attr_backgrund">
</div>
</form>
I've created the following input label/text box, but its huge and runs across the page. Is there anyway I can change the size of the textbox so that it's a lot smaller than it currently is? My code below:
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
PS: I'm doing this in Lightning, so my CSS is already installed. Unfortunately, I'm not allowed to edit the CSS and have to find another way to resize this. I fsomeone can help me out, that would really help.
If css is absolutely out of the question you could always just add an inline style rule. This is generally not considered best practice, but if that's all you're left with you may not have another option.
<div style="width:300px;" class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
<style>
input, button, select, textarea {
width: 100%;
}
</style>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>`enter code here`
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
I have changed from Bootstrap 3.0.0 to 3.2.0 this morning because I needed some of the new features for my web application. Everything seemed to work as expected until I observed an issue with the vertical alignment of checkboxes in a .form-horizontal form.
An example is available at http://www.bootply.com/AYN64feYze. The markup for this minimum example is:
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> label text
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</div>
</div>
</div>
If a checkbox has no following text it is shifted below the row it should appear in.
Is there a solution to this problem? Since I already have the leading label I do not need a following text for my checkboxes. My current workaround is adding text to the <label> that contains the <input type="checkbox"> and use the background color as the font color to hide the text.
Thank you for your help.
I'm not sure if this will affect the rest of your form layout, but the issue seems to be resolved if you change the display attribute of <label> (currently set to inline-block) to:
label{
display:inline;
}
Here's an updated Bootply. Hope this helps! Let me know if you have any questions.
This worked for me:
<div class="form-group">
<div class="col-lg-3">
<label class="pull-right" for="MyCheckBox">My Checkbox</label>
</div>
<div class="col-lg-9">
<input type="checkbox" name="MyCheckBox">
</div>
</div>
First, I had to remove the <div class='checkbox'> element. I then made the following changes to the checkbox label element:
Place the label in its own column div <div class="col-lg-3"></div>
Remove class="control-label"
Add class="pull-right".
I ended up with a checkbox that aligned with the other inputs horizontally and with its label vertically.
If you don't need following text for the checkboxes, why not just remove the <label> surrounding the checkboxes. Like so.
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="check1">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check1">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="check2">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check2">
</div>
</div>
</div>
</div>
This code appeared to work in your Bootply when I tried it.
And remember if you have a label to use the for attribute for screen readers and to make it easier for your users (they can just click the label instead of the checkbox).
I'd like to use a combo input checkbox that also shows required (angular) validation error when it's missing, but I cannot get the checkbox add-on and the help-block to play nice. Here's the markup:
<div class="form-group" ng-class="{'has-error': addressForm.street.$invalid && !addressForm.street.$pristine}">
<div class="col-md-10">
<div class="input-group">
<input type="text" placeholder="Street" name="street" class="form-control" ng-model="address.street" required>
<span class="help-block" ng-show="addressForm.street.$invalid && !addressForm.street.$pristine">Required</span>
<span class="input-group-addon">
<input type="checkbox" ng-model="address.listAddress"> List
</span>
</div>
</div>
</div>
It looks fine when there's no error:
But not fine when there is an error:
I've tried reordering, changing the error span to a div, inserting br, etc. Any help is much obliged. Would be even happier if it can be down without tons more markup (new to html/css and it's kind of amazing to me how so many chars are required to say something that seems simple).
You should move the required span outside of the input-group div.
<div class="col-md-10">
<span class="help-block" ng-show="addressForm.street.$invalid && !addressForm.street.$pristine">Required</span>
<div class="input-group">
<input type="text" placeholder="Street" name="street" class="form-control" ng-model="address.street" required>
<span class="input-group-addon">
<input type="checkbox" ng-model="address.listAddress"> List
</span>
</div>
</div>
Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.
All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.
Here's my JSFiddle
Code (using PureCSS for styling):
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" type="text" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" type="text" placeholder="Enter description here..."></textarea>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Any help would be much appreciated. Thanks.
Here's a simple way. There are probably others.
<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
I'm interested in an enhanced listing or premium profile,
(a member of our team will respond promptly with further information)
</div>
I used a div to "block" structure the text and moved it to the right. The float: left on the input keeps the checkbox to the left of the text (not above). The margin-top on the input tweaks the top alignment with the text.
The fiddle.
This is the method, that I used. It worked better for me than the many other methods I found on SO.
LABEL.indented-checkbox-text
{
margin-left: 2em;
display: block;
position: relative;
margin-top: -1.4em; /* make this margin match whatever your line-height is */
line-height: 1.4em; /* can be set here, or elsewehere */
}
<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>
Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox" style="float: left;">
<div style="overflow: hidden; padding: 0px 0px 0px 5px;">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</div>
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>