With this markup:
<label for="example">
<textarea id="example" cols="40" rows="10"></textarea>
</label>
The label does not expand with the textarea and hence the textarea pushes itself under the following fields in the form.
Does anyone know how to get the label to expand to the size of the textarea using CSS?
I've tried:
label { display: table; }
and all kinds of margins and padding on both the label and the textarea, but to no avail.
I think you'll need to close the text area properly, i.e with a closing </textarea> tag - though, I'm unsure of the use of label in this way - perhaps the for attribute is made redundant by enclosing the target element with the label tags. :shrugs:
Removing the </textarea> tag from the below example makes the check-box disappear, the point being that page display is broken if the tag is omitted. :)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="cb">
<textarea id="example" cols="40" rows="10"></textarea>
</label>
<input type='checkbox' checked='true' id='cb'/>
</body>
</html>
Related
I want to position a label above and to the left edge of a text field. I put them together in a div. The only problem left is that I need the correct position or display attribute that the input field doesn't react to the label. In that way, I could write text-align:left or float: left to position the label at the very edge of the div and thus at the very edge of the label.
<div class="AlignLeft">
<input type="text" id="1" name="name" maxlength="100" required>
<label for="name" id="1">Align label left</label><br>
</div>
Thank you!
without CSS
to make that on click of the label, the input will be focused.
you will need that your <label> element, have the for="" attribute
this attribute needs the same id="" as the input. (not the name="")
for attribute (docs): https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for
for making the <label> be on the left
put the label before the <input>
make the input nested inside the <label>, then insert a span before the <input>
no css solution:
<div>
<label for="myId"> <!-- put here the id -->
<span>this is the label text</span> <!-- the text -->
<input type="text" id="myId"> <!-- input -->
</label>
</div>
with CSS
if you can't change the HTML structure, then follow this second way (using CSS)
The float property, you showed before seems to work fine.
so just change the for="" attribute to be equal to the id="" of <input>
.AlignLeft label {
float: left;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
or use CSS flex with the direction of reverse
using flexbox you have other advantages like gap or centering, and so on...
.AlignLeft {
display: flex;
/* solve the problem (now the text is on the left side) */
flex-direction: row-reverse;
/* you can center easily using flex, or in this case put it on the left of the page */
justify-content: left;
align-items: center;
/* add a gap is easier with flex */
gap: 1rem;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
<s:checkboxlist list="fruits" name="selectfruits" listKey="id" listValue="description" id="fruitsid">
Suppose I have the above checkboxlist that contains multiple checkboxes. I would like to change the background color to grey and the color of the label to white when the mouse hovers upon the respective checkbox or its label. How would I achieve this by changing its style in the css?
I tried the following in the css file by referring the checkboxlist's id but it does not work:
#fruitsid:hover {
color:white;
background-color:grey;
}
The generated HTML for the above code:
<input type="checkbox" name="selectfruits" value="Apple" id="selectfruits-1">Apple
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Melon" id="selectfruits-2">Guava
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Orange" id="selectfruits-3">Orange
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Guava" id="selectfruits-4">Grapefruit
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Pineapple" id="selectfruits-5">Melon
<br/><br/></input>
Is there any way where you can refer each label and change its css style like the one mentioned above?
Thanks!
You can use CSS3 startswith selector:
input[id^="selectfruits"]:hover{
/* your custom style here */
}
BTW checkboxes (and radiobuttons too) are special items, rendered differently basing on Browser / Operative System, and hard to style with CSS only.
The snippet above is correct to target an item (even a checkbox or a radiobutton), but the problem is that then you can't do what you ask. You could change the size or the position, for example, but not the color / background-color, because they don't have those properties.
There are several solutions to this, but the two most famous are:
Hiding the real checkbox and then showing another element (a span with an image, usually):
This is used when a crossbrowser/cross-OS rendering is mandatory, and/or when there is the need to show a better / different graphical object (I've used checkboxes with lock/unlock symbols, for example). But I guess it's not your case.
Wrapping the checkbox in another element (eg. a div) and then styling that element:
this appears to be your case. There is no need to wrap it in a div, btw, a label element next to the checkbox is enough for your case. The problem is that <s:checkboxlist/> tag is generating the HTML for you, without the labels, then you should avoid using this tag in order to be able to add your custom HTML;
change your tag with single checkboxes tags generated inside an iterator... or just with plain HTML elements, to keep it simple:
<s:iterator value="fruits" status="ctr">
<input type="checkbox"
name="selectfruits"
class="chkFruits"
value="<s:property value='%{id}'/>"
id="selectfruits-<s:property value='%{#ctr.count}'/>">
<label for="selectfruits-<s:property value='%{#ctr.count}'/>" class="lblFruits">
<s:property value='%{description}'/>
</label>
<br/><br/>
</s:iterator>
that will generate the following output, that you can style with standard selectors:
.chkFruits:hover + .lblFruits {
background-color: blue;
color: white;
}
<input type="checkbox" name="selectfruits" value="AWARD"
id="selectfruits-1" class="chkFruits" />
<label for="selectfruits-1" class="lblFruits">Apple</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="CLIST"
id="selectfruits-2" class="chkFruits" />
<label for="selectfruits-2" class="lblFruits">Guava</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="HAN"
id="selectfruits-3" class="chkFruits" />
<label for="selectfruits-3" class="lblFruits">Orange</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="POS"
id="selectfruits-4" class="chkFruits" />
<label for="selectfruits-4" class="lblFruits">Melon</label>
<br/><br/>
This answer works for all check in my webpages!
input[type="checkbox"]:hover + label {
color: #fff;
border-color: #1b7aa9;
background-color: #239fdb;
}
I want to have some text on a row, followed by an input box on the same row.
However, the input box is always going to the next row, even though there's enough space for it on same row as the text. I looked in the documentation, and there is only advice there to do what I want for forms (i.e class form-horizontal).
However, I just want some text (<p> tag) and then an input box.
See simple JSFiddle
http://jsfiddle.net/dz089gac/1/
<div class="container">
<div class="row">
<p>Hi</p>
<input type="text" placeholder="hi">
</div>
</diV>
Use below code:
<div class="container">
<div class="row">
<span>Hi</span>
<input type="text" placeholder="hi">
</div>
</diV>
Use span instead of p tag as p creates block of element and place a new line after the tag close.
This is because the p is a block element and the next element will start on a new line.
If you can not change the element type or move the input into the p tag then you can use css to make the p element inline.
.row p{
display:inline-block;
}
http://jsfiddle.net/dz089gac/3/
A paragraph (p) is a block-level element. That means it takes up the entire "row" it is on.
You should strongly consider using a label (label) instead, which is more semantically correct in this context and, as such, provides a few benefits:
<div class="container">
<div class="row">
<label for="my_input_element">Hi</label>
<input type="text" placeholder="hi" id="my_input_element">
</div>
</diV>
Clicking on the label will set the focus on the corresponding input element, and screenreaders (and other devices) recognize that the label is associated with the input, rather than a block of unrelated text. This is exactly what a label is INTENDED to be used for.
fiddle: http://jsfiddle.net/s62evwmz/
Put inside the paragraph.
<p>Hi <input type="text" placeholder="hi"></p>
But that is much more better, if you are using labels instead of p
<label>Hi <input type="text" placeholder="hi"></label>
I don't know if this is what you want, but i have put the input type into the </p> tag.
Updated fiddle here
just put the input inside the <p></p>
e.g.
<div class="container">
<div class="row">
<p>Hi <input type="text" placeholder="hi"></p>
</div>
</diV>
fiddle
You can set the display property of <P> tag to the inline-block value i.e. display=inline-block and if required you can give some margin for the Box this will add space between them.
ie .
<div class="container">
<div class="row">
<p style="display:inline-block;">Hi</p>
<input type="text" placeholder="hi" >
</div>
</diV>
Demo Link : http://jsfiddle.net/dz089gac/10/
There is a portion of a web app that I am writing that is being a particular pain to make look really nice and neat like I want it. I have a button with a fixed width next to a form that contains text, an input text box, and a submit button. I want the width of the input box to resize based on the width of the screen but I don't know how to do without making a piece fall onto the next line.
Here is a fiddle of the problem: http://jsfiddle.net/Yt3V2/
HTML:
<div class="wrapper">
<button type="button" class="new_button">Create New</button>
<form name="input" action="" method="post">
Search:
<input type="text" class="search_input"></input>
<input type="submit" value="Submit"></input>
</form>
</div>
CSS:
.new_button
{
float: left;
min-width: 120px;
}
.search_input
{
width: /* What could go here? */;
}
A lot of suggestions included making a table out of the CSS, which gets me pretty close but the text box will still get cut off: http://jsfiddle.net/G9pDw/
Is there any way to get the input text box to resize dynamically and still fit where I want it to?
According to this question : try changing :
<input type="text" class="search_input"></input>
to
<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input>
JSFiddle
**Updated*************************
New JSfiddle
I have a div that contains a couple of radio buttons. These show/hide a textbox.
<p>Some text</p>
<div>
<div>
<input id="show" name="radioGroup" type="radio" value="1" /><label for="show">Show</label> -
<input id="hide" name="radioGroup" type="radio" value="0" /><label for="hide">Hide</label>
</div>
<div class="myTextBox">
<input type='text'>
</div>
</div>
<p>Some text</p>
When I show/hide the .myTextBox then the text bumps a couple of pixels. This is due to the padding & margin on the textbox.
Without removing these settings (padding/margin) is there a way to eliminate the CSS bump?
See example on jsFiddle http://jsfiddle.net/nTJZN/1/
See here.
What I am doing is basically instead of show() and hide() I'm altering the visibility property.
function ShowHideTextbox()
{
if($("#show").is(":checked"))
$(".myTextBox").css('visibility','visible');
else
$(".myTextBox").css('visibility','hidden');
}
This is because your input box is taller than the text, which causes the line to grow when the input box is shown. By inspecting the element, I determined the line was 28px high when the input box was visible, so applying a line-height of 28px fixes the problem, like so:
div
{
display: inline-block;
line-height: 28px;
}
See http://jsfiddle.net/X4X3U/