This question already has answers here:
How to wrap text of HTML button with fixed width?
(8 answers)
Button overflow hidden not working
(4 answers)
Closed 3 years ago.
The input overflows the parent container when the text is too long.
I am looking at how to wrap the text inside of the element. I tried word-break, text-wrap but nothing worked.
<div>
<input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
</div>
white-space:normal seems to work fine in Chrome, Firefox, IE and Edge …
div { width: 400px; }
input[type=submit] { white-space:normal; }
<div>
<input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text">
</div>
Just specify a max-width on the button:
.submit {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.container {
width: 300px;
}
<div class="container">
<input type="submit" name="test" class="submit" value="sample text sample text sample text sample text sample text sample text sample text sample text" />
</div>
Notice that you can also style the overflow using the text-overflow property.
Related
This question already has an answer here:
List of HTML5 elements that can be nested inside P element?
(1 answer)
Closed 2 years ago.
I want to offer a selection by radio buttons. Upon hovering over the label for the button, I want there to appear an explanation for that option.
I can achieve this by putting the explanation text into a span-element, but not in a p-element...and I fail to understand the difference:
<fieldset>
<h2>Select player</h2>
<div clas="radios">
<legend>Select character class:</legend>
<p class="row">
<input type="radio" id="character-ninja" name="character" value="ninja">
<label for="character-ninja" class="show">Ninja</label>
<p class="hidden">The ninja class....</p>
</p>
</div>
</fieldset>
with the style sheet
.hidden{
display: none;
}
.show:hover + .hidden{
display: block;
}
The text in the p-element is hidden by "display:none", but it does not appear upon hovering over the text in the label-element.
If I change the p-element into a span-element, the text is also hidden by "display:none", but it does appear upon hovering over the text in the label-element.
I think that the different behavior might be the result of nesting a p-element within a p-element...but even so I don't quite understand why it is "partially working", as I would call it.
You should use div as a row element:
<div class="row">
The reason why nested p tags does not work in your code is that it is not valid HTML. It is corrected by the browser. So the sibling of label is no longer p then.
.hidden{
display: none;
}
.show:hover + .hidden{
display: block;
}
<fieldset>
<h2>Select player</h2>
<div clas="radios">
<legend>Select character class:</legend>
<div class="row">
<input type="radio" id="character-ninja" name="character" value="ninja">
<label for="character-ninja" class="show">Ninja</label>
<p class="hidden">The ninja class....</p>
</div>
</div>
</fieldset>
I have a text input field with a fixed height, I want the box to look big because of the considerable amount of text that has to be typed in it. The problem is, when the height is set and the user clicks in the box, the text starts right at the center of the box, I would like the text to start on top. My code:
#mainText {
width: 400px;
height: 300px;
}
<div>
<form>
<input type="text" id="mainText" value="Your text">
<button>Submit Text</button>
</form>
</div>
Try using an input type called textarea. It's better for large amounts of text. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Example usage:
<textarea id="mainText" name="mainText">Your text</textarea>
You can use textarea instead of input which will allow you to enter multiple lines and it will start writting from top left
I have created a simple text label with a input field and a image behind it:
<p><label for="something" style=" padding: 5px; display:inline-block; width: 440px; border:1px solid white;">Something Since<input type="text" id="datepicker" size="7" readonly></label></p>
With all the other text labels, that havent got the id datepicker (which contains a image and when clicked on the image a daterpicker pop-up) the text is automaticly centered middle in the box. This isnt the case with the image text..
Here a image which makes it a bit clearer:
Anyone a clue how i can fix it so the text and image is centered as well in the inline box?
To center images and text in one line you can apply vertical-align: middle to your image like this:
<p>
<label for="something">Something Since</label>
<input type="text" id="something" />
<img src="" style="vertical-align:middle;" />
</p>
http://jsfiddle.net/2nxsQ/
This question already has answers here:
Clear icon inside input text
(18 answers)
Closed 6 years ago.
I am working on a webpage where I have a HTML Input Text element which is disabled onload.
I currently have a edit button next to the Input Container onclick of which I disable/enable the field.
<input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true">
<img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')">
Is there any other way in which I could place this icon in the input tab itself without overlapping the text.
img.onInput
{
position: relative;
left: -20px;
}
I tried using CSS with but the text gets underneath the icon which I do not want.
I am trying to get something like the "google search" add-on in firefox. Is that at all possible with simple input text and icon?
Thanks in advance :)
Update:
I want a button like in this image on text input. The icon is clickable and I want to trigger a JavaScript function onClick event.
Found the answer I was looking for: https://stackoverflow.com/a/6258628/2596762
You can create a CSS class with the background property and specify the location of your image, set it to no-repeat so it only displays the image once, then fiddle with the positioning by adding padding attributes and the like.
So for your CSS, something like:
.search {
background: url('image.jpg') no-repeat;
}
Then you just add it as the class attribute to your text box tag:
<input type="text" name="TxtBx1" id="TxtBx1" class="search">
background: url(user.gif) no-repeat scroll 7px 7px;
padding-left:30px;
try using this:
<div class="search-div">
<input class="search" type="text" placeholder="Search here" />
<img src="image-url" /></div>
here is css code:
.search-div{
border:1px;
border-style:solid;
border-color: lightgrey;
}
.search{
border:none;
}
This css will make div look like a text box and removes the outline of input text-box.
You can format the size of image link and also change the link address from "#" to the desired url.
I'd like to ensure that there's never a line break between a radio button and the start of its adjacent label. However, I want text within the label to be allowed to wrap. Is this possible? You can see my failed attempts by rendering the following HTML:
<html>
<head>
<style type="text/css">
.box {
border: solid gray 2px;
width: 200px;
margin: 5px;
}
.chopped {
overflow: hidden;
}
</style>
</head>
<body>
The boxes need to be fixed-width, so long content needs to be wrapped, as seen in the first box below. And if someone tries to post a ridiculously long string without any spaces, we need it to be truncated, rather than extend beyond the edge of the box -- the problem is visible in the second box:
<div class="box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
So I add "overflow: hidden", and things are somewhat better, but I still don't like how the second box has a line break between the radio button and its label:
<div class="chopped box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="chopped box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
If I add <nobr>, the radio buttons are next to their labels, and so the unspaced string now looks perfect. However, this breaks the first string (the one with spaces), since it no longer wraps:
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</nobr>
</div>
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</nobr>
</div>
</body>
</html>
First, move the radio buttons inside your labels. This adds the nice feature that you can select the radio buttons by clicking the text. Then add a span around the text.
<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This is a really long string with no spaces</span>
</label>
</div>
<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This_is_a_really_long_string_with_no_spaces</span>
</label>
</div>
Second, add the following style to your css:
label {
white-space:nowrap;
}
.wrappable {
white-space:normal;
}
The white-space style on the label prevents the linebreak between the radio button and the text, and the span around the text allows it to wrap just within the text.
have you tried white-space:nowrap; inside your .chopped definition?
If you don't mind the less-neat markup, you can get what you want by simply eliminating the white space between the <input> and <label> text.
<div class="chopped box">
<label><input type="radio"/>This is a really long string with no spaces</label>
</div>
<div class="chopped box">
<label><input type="radio"/>This_is_a_really_long_string_with_no_spaces</label>
</div>
(<label>s placed around <input>s per JacobM's suggestion.)
If you want a bit of room between the <input> and the first character of the label, use a non-breaking space ( ) entity.
The solution provided by JacobM is for this special case ofcourse the best solution. But this problem goes beyond just some radio buttons with their labels. My solution in general:
In line text blabla <span style="white-space: normal;"><element /></span> blabla
Thus as a solution for this specific case, the result would be:
<label>
<span style="white-space: normal;">
<input type="radio" />
</span>
This_is_a_really_long_string_with_no_spaces
</label>
PS: My situation was an <input /> element inline in wrapping text. The problem was that it would break the line after the element instead of the text at the end of the line. It was really hard to search for this problem using a searchengine, I hope this helps others out.
Sometimes you can't move the tags around because the output is generated beyond your control. So if you can't move the checkbox / radio button into the label you might want to go with:
.box {
white-space: nowrap;
}
.box label {
white-space: normal;
}