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.
Related
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 have a problem that I've never seen before: a plain old regular html textarea that resizes on focus.
Even though I set the height of the desired area, it still resizes to something either smaller or larger with no obvious correlation. I've tried to remove all my classes on the item with no luck.
Is this is bootstrap thing?
and how do i fix it?
link to short video of the problem:
https://www.dropbox.com/s/7329y5a96ixajl4/18-34-46.wmv?dl=0
<textarea style="min-height: 150px; height: 150px;
max-width: 100%;" type="text" name="jobDesc"
ng-model="req.jobDesc" placeholder="Write a description for the assignment">
</textarea>
Try using rows Attribute:
<textarea rows="4" >
This should force the text area to only show 4 lines, or 5, as you desire.
</textarea>
Anyway, I think you can check the size of your text area or the
calculated properties, clicking on "inspect" on your browser (for
example chrome). Then click on Styles/Computed and you will see the
styles you are applying.
An image of the properties:
EDIT:
I´ve tried to make a fiddle to think about which property is breaking it,
try it. It it seems you need to look for a textarea:focus or similar
inside your css`s :)
Changed snippet to show how also padding property can affect the size
#editor1 {height: 10px;}
#editor1:focus {height: 20px;}
#editor2:focus { padding-bottom: 10px;}
<textarea id="editor1" placeholder="Check it!!"></textarea>
<textarea id="editor2" placeholder="Check it!!"></textarea>
Improved with comment from OP after solving:
I did actually manage to find out what caused the problem. Hidden in one of the js files was some legacy code to manage resizing of textareas. As some of the pages where loading in templates on top of the actual page(in a aside/modal) the code wasnt running correctly. Thank you for taking the time. It led me to my
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
<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
Hello I have a problem with a fieldset in CSS.
I have this example
In this example you can see that left hand side the border
margin-left: 0px;
flushes exactly on one line/height with the dark frame. Right hand side you can see that the class fr has
margin-right: 0px;
But it does not flush with the frame border. I have tried to Google for it but I could not find anything on that. Is this phaenomenon normal or what am I doing wrong? are there some specific borders?
UPDATE
hello and thanks for answering this question. i tried to implement that code directly into my editor (dreamweaver cs6) and thought it used to be the same style as on jsfiddle. wrong. it seems like there is a problem with the editor because as a result i will get this:
it looks like there are automatically added tabs left hand side. so is there anybody who knows about that problem? thanks a lot.
UPDATE 2:
i had to reset the css default settings.
I would say the main one is that you have your labels set to 80px wide and your inputs are set to 180px wide.
Probably need them to be the same size. I'd also check your math to make sure it all adds up properly.
Add box-sizing: border-box to the inputs. (Also add -moz-box-sizing and -webkit-box-sizing for the relevant vendors)
use this instead, box-sizing:border-box causes the padding to be used from inside the input element rather than the outside.
#left #frame form fieldset ul input {
position:relative
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box
}
yes box-sizing:border-box; is a good solution but simply reduce the size of input-box 7 pixel{5px for left-side padding and 2px for border of both left and right side border} so now final width of input-box is 173px
It looks like you want to put some input fields (a form, perhaps?) into columns and just don't seem to know the best way to do it?
I am working on a form right now, actually- here's how i do it when I want to have two columns within a div.
<form>
<fieldset>
<legend>The form to fill out</legend>
<p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p>
<div class="columnA">
<label for="fname">Label 1</label>
<input type="text" name="fname" tabindex="1" />
</div>
<div class="columnB">
<label for="address1">Address:</label>
<input type="text" name="address1" tabindex="10" />
</div>
<div class="fullwidth">
<input type="submit" value="Register"/>
</div>
</fieldset>
</form>
Then, make sure that these things are set (minimally) in your CSS for each of the above classes:
margin
padding
width
(advice: I actually set these first within every piece of my CSS- it gives me a structure if I have my own order of elements for my CSS. I am not saying use mine, but adopt your own- it saves time when you're troubleshooting)
Remember, if you want the parent element (whatever div is containing the form) all child elements have to be floated as well.
Now, you might think to float columnA to the left and columnB to the right, with both set at a width that adds up to 50% once you add in margins and padding. However, I've found that unless my content demands that much real estate, you can actually float both to the left and you'll get a better look for the form as a whole.