Hello I have input group with this structure:
<div class="input-group">
<span class="input-group-addon">
Jesteś użytkownikiem<br /> tych urządzeń?
</span>
<span class="form-control">
<input type="checkbox" checked data-bind="checked: MeUser">
</span>
</div>
As you can see input-group-addon consists of two lines and form-control only one line.
Therefor height of both object is not aligning. You can see this in this Fiddle
Can anyone suggest me modifications to make this two object to have same height?
Set a static value to the input-group class
& set static values to the child classes
CSS:
.input-group{
height:100px;
}
.input-group-item{
height:50px;
}
HTML:
<div class="input-group">
<div class="input-group-item"><span class="input-group-addon">
Jesteś użytkownikiem<br /> tych urządzeń?
</span></div>
<div class="input-group-item"><span class="form-control">
<input type="checkbox" checked data-bind="checked: MeUser">
</span></div>
</div>
Related
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>
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>
The given example is probably a bit bigger than required but I could not figure out in hours where the problem lies, so I am posting it. You just have to look into the label #problematic and around it (Line number 9 in the JSFiddle).
The problem with it is that it takes up all the space left by the adjacent label. The question is why? And what to do about it?
I had worked out this example (with the help of some SO community) to make the layout before incorporating the complex content. It works perfectly in the example. But it behaves weirdly in my code.
Here is the JSFiddle.
CODE:-
<form action="http://localhost/moodle/mod/quiz/processattempt.php" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="responseform">
<div>
<!-- ------------------------------------------------- -->
<div style="display:table;">
<div style="display:table-row; background-color:#e8c277;">
<label id="problematic" style="display:table-cell; padding:10px; border-width:1px;border-color:blue;border-style:solid;">True</label>
<label style="display:table-cell; padding:10px;border-width:1px;border-color:red;border-style:solid;"><span style="white-space:nowrap;">False</span></label>
<span style="display:table-cell;"></span>
</div>
<!-- ------------------------------------------------- -->
<div class="que multichoice deferredfeedback notyetanswered" id="q13">
<div>
<div class="formulation">
<h4 class="accesshide">Question text</h4>
<input type="hidden" name="q36:13_:sequencecheck" value="1" />
<div class="ablock" style="display:table-row;">
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:13_answer" value="0" id="q36:13_answer0" />
</span>
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:13_answer" value="1" id="q36:13_answer1" />
</span>
<label class="qtext" style="display:table-cell;">No individual country produces more than one-fourth of the world's sugar.
</label>
</div>
</div>
</div>
</div>
<div class="que multichoice deferredfeedback notyetanswered" id="q14">
<div>
<div class="formulation">
<h4 class="accesshide">Question text</h4>
<input type="hidden" name="q36:14_:sequencecheck" value="1" />
<div class="ablock" style="display:table-row;">
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:14_answer" value="0" id="q36:14_answer0" />
</span>
<span style="display:table-cell; text-align:center;">
<input type="radio" name="q36:14_answer" value="1" id="q36:14_answer1" />
</span>
<label class="qtext" style="display:table-cell;">If Brazil produces less than 20% of the world's supply of any commodity listed in the table, Brazil is not the world's top exporter of than commodity.
</label>
</div>
</div>
</div>
</div>
<!-- ------------------------------------------------- -->
</div>
<!-- ------------------------------------------------- -->
<div class="submitbtns">
<input type="submit" name="next" value="Next" />
</div>
</div>
</form>
You can not have divs wrapping your table rows/cells. There were divs wrapping your second and third rows, causing them to be treated as if they were all in the first column.
See the fiddle below for an example of a working layout. Note: I deleted a lot of your divs. Your table structure has to be table:table-row:table-cell with no other divs wrapping the rows or cells. Removing the excess divs restored the proper layout.
JSFiddle
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>
I would like to align the following:
<div class="span5">
<div class="">
<span class="label">Label1</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label2</span>
<input type="text" class="input-medium" placeholder="0" >
</div>
<div class="">
<label class="checkbox inline">
<input type="checkbox"><span>Something</span>
</label>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label4</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label label-inverse">Label5</span>
<input type="text" class="input-medium" placeholder="0">
</div>
</div>
Here's the fiddle:
http://jsfiddle.net/qP46X/1267/
I tried margin right but it didnt help. I am not sure how to align the textboxes together
Use a set width for the .label elements. Ideally you'd have consistency in the layout and you could also use labels for all of the text, but a set width + display: inline-block will work. You can of course change the width as needed.
http://jsfiddle.net/qP46X/1268/
you can also use twitter bootstrap form-horizontal css class and its sub-component classes to fulfill your requirement. i modified a bit styling of your code but you might achieve exactly what you want from the below reference( see Horizontal form in the below link)
Reference: http://twitter.github.com/bootstrap/base-css.html#forms
Demo: http://jsfiddle.net/qP46X/1269/