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>
Related
do you know how is it possibile that when you enter to an input, JAWS first read content of previous field?
Is it possible to fix it or it depends on browser you use?
This is my code:
<!-- Presso -->
<div class="{!IF(presso, 'slds-show', 'slds-hide')}" style="margin-bottom: 8px">
<div class="slds-form-element slds-size--1-of-1">
<label class="slds-form-element__label">Presso</label>
<div class="slds-form-element__control">
<input id="pressoInput" class="slds-input" type="text" />
</div>
</div>
</div>
<!-- Region -->
<div class="slds-form-element">
<label class="slds-form-element__label">
Region
</label>
<div class="slds-form-element__control">
<input id="regionInput" class="slds-input" type="text" disabled="disabled"/>
</div>
</div>
I see two things. The first is your second <input> is disabled so I'm a little curious how you are getting your focus onto the second input. You're not using tab because the browser won't let you do that. Are you using the down arrow in JAWS to navigate through the DOM?
Second, you have <label> elements but you are not associating the labels with the <input> fields. Just because the <label> is next to the <input> in the DOM does not mean the screen reader will read the label when focus moves to the input. You have to tie them together. This is done with the for attribute of the <label>. The value of for should be the ID (not the NAME) property of the <input> as follows:
<label class="slds-form-element__label" for="pressoInput">Presso</label>
<div class="slds-form-element__control">
<input id="pressoInput" class="slds-input" type="text" />
</div>
...
<label class="slds-form-element__label" for="regionInput">Region</label>
<div class="slds-form-element__control">
<input id="regionInput" class="slds-input" type="text" disabled="disabled" />
</div>
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 have a below set of input text elements in my page. I actually need to apply style to div element of "forms_in_ap" class containing the #email, #reEmail, #nogInFirstName, #nogInAccNumber elements alone, in Safari browser of all MAC and IOS devices.
CSS to apply style to specific elements of specific div:
html[xmlns*=""]:root
.form_input_wrap input#email,
.form_input_wrap input#reEmail,
.form_input_wrap input#nogInFirstName,
.form_input_wrap input#nogInAccNumber
{
height: 42px;
}
HTML Code:
<div class="asd removeFocus">
<div class="forms_in_ap removeFocus">
<label for="email">Email address</label>
<div class="removeFocus">
<input type="text" id="email" name="email" class="required error ">
<span id="email-error" class="error">Please enter a Valid Email Address.</span>
</div>
</div>
<div class="forms_in_ap removeFocus">
<label for="reEmail">Re-enter email address</label>
<div class="removeFocus">
<input type="text" id="reEmail" name="reEmail" maxlength="64">
</div>
</div>
</div>
<div class="form">
<div class="forms_in_ap">
<label for="nogInFirstName">First Name</label>
<div>
<input type="text" name="txtFName" maxlength="15" id="nogInFirstName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInLastName">Last Named</label>
<div>
<input type="text" name="txtLName" maxlength="15" id="nogInLastName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInAccNumber">Coupon Number</label>
<div>
<input type="text" name="shcCreditCardNumber" maxlength="19" id="nogInAccNumber">
</div>
</div>
<div class=" forms_in_ap">
<div class="ccvDiv">
<label for="cvv"> pin</label>
<div>
<input type="text" class="cvvWidth required" name="cvv" id="cvv" maxlength="3">
</div>
</div>
</div>
</div>
The above CSS works fine but not sure whether this is a correct, standard or optimize code please suggest me.
Since you have each specific input with an HTML ID, there is no need for you to specify the parent class.
This should work for you, it's cleaner and simpler:
input#email,
input#reEmail,
input#nogInFirstName,
input#nogInAccNumber
{
height: 42px;
}
The most important thing to remember here is that IDs are unique. You can't have two elements with the same ID, so adding the parent element when styling is not necessary.
Note about the "input": Since the IDs are unique, there's no need to have the "input" before the ID, but it can be seen as good practice for elements such as inputs to have the selector prior to the class/id, making it clearer what you're styling.
However, this doesn't apply to things like divs, since almost everything on the web is a div, adding it before a class/id is just overkill.
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.
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/