I have
<div class="form-group">
<label class="control-label">
Last name
<input style="font-weight: normal;" required maxlength="50" type="text" class="form-control" name="lastName">
</label>
</div>
The input width is 210px in Firefox, 177px in Chrome, but I can't find the constant in the css after inspecting the element. The label "Last name" is much thinner than 210px. If I change the label to a very long string, the input's width will adjust accordingly(100%). However, I'm looking for where the minimum width is defined. I am using this markup so that I don't need to give the label a for attribute equal to the id of its input. I could easily explicitly set the width, but I'm just curious where this value came from. If these are browser styles, then how can I view them?
Well input.form-control is set to 100% which means 100% of whatever it's parent is. In this case, that's the label control.
The difference in the default label width is likely due to differences in each browser's default stylesheet
If you'd like the input to take up the full width, but don't want to type out a long label, you can just set:
.form-group > label { width: 100%; }
Demo in jsFiddle
Related
I want to change input field auto focus cursor's height and width.
app.component.html
<input class="subdisplay" [ngModel]="input | number" type="text"
(keyup)="getValue(box.value)" name="name" autofocus #box/>
I want to change cursor width and height in input box in Angular.
I think you are referring to the caret. You cant change the width of the caret but can change properties like,
input {
caret-color:
caret-shape: // This is experimental
}
PS This has nothing to do with Angular
I'm setting up a simple HTML interface with <input type="number"> in it. The problem is that the <input> element is taking too much space (It takes about 10 columns, but I only need two columns).
Because the input will never be more than two digits, I want to define as size of 2 characters for the <input type="number"> element.
However the width attribute only works with <input type="image">, and alternatively the size attribute doesn't work with the type attribute set as number. What other alternatives are there? (preferably HTML, or maybe CSS, nothing else)
note:
sounds like there is a css solution, as given below, however just to be more clear, I must add this question is not about setting a max/min value to the number type of input element, rather the width. CSS, as given below, solved the problem, although I haven't seen an HTML solution, but that's fine enough for me. Thanks
input[type="number"] {
width: 2.5em;
}
<input type="number">
em can be used to style the width of elements based on the font size. The only problem is that you will have to make the element wider than two characters because the up and down arrows needs some space inside of the input box as well. Try readjusting the width to 2em instead of 2.5em and you will see what I mean.
width should work. At least it works here on Firefox in the following snippet:
input[type=number] {
background: #fc9;
width: 30px;
}
<form method="post">
<input type="number" name="x" value="23"/>
</form>
Ok, its pretty simple. all you have to use CSS to define a width.
<input type="number" class="form-control">
then
.form-control{
display: block;
width: 20%; //for two column
}
and use some more css styles to make it gorgeous.
I am working on a project: web terminal.
In it, the format is something this
<div class="prompt">C:/users/somebody/ </div> <input type="text" class="usrcommand">
Here, the width of .prompt is not definite(changes according to user) and the input tag should cover the remaining portion that is left after .prompt.
Note that: .prompt has been styled: display: inline
So, how to do that?
Try display:inline-block rule on both the classes (.prompt and usrcommand)
Basic HTML Question: My text input field stretches across the entire webpage and I want to center it and make it look a bit more friendly.
I'm in Wordpress and am editing the HTML. Here is what I currently have:
<input name="FNAME" required="" type="text" placeholder="First Name" maxlength="5"/></p>
Is there a difference if I use maxlength=, maxlength:, maxlength:50px etc?
I know this is basic, but i've been playing around with this for a while now.
Thanks so much!
maxlength is an HTML input attribute which determines the maximum number of characters which can be entered into the input. maxlength=50 means that the user can't enter more than 50 characters.
What you want is CSS, which controls styling. The following would make the input 50% width of its containing element and center it within that element.
input {
display: block;
width: 50%;
margin: 0 auto;
}
max-width sets the maximum width that an element can ever be. It overrides width. It's especially useful in setting up responsive designs. In general though, if you merely want to set the width of an element, use width.
I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border.
When I am typing in the text field and it goes beyond the container I cannot see what I am typing. How do I make the div follow the text.
Textfield:
<label><div id="name">
<textarea name="name" type="text" id="name" title="Enter Message Here" rows=9 cols=60 maxlength="2000"></textarea>
</label>
Styles:
#name {
border: 1px solid #c810ca;
width: 270px;
height:159px;
}
Try to improve basic things:
Don't use any id name more than once (you have div#name and textarea#name, it can cause problems)
Close tags in correct order
Textarea doesn't support text attribute
If it won't solve you problem, please give some more details - I've tested your code and I can see what I'm typing. If you mean to make div's height flexible (although textarea has constant height, it is still resizeable), remove the height and replace it by min-height.