I have an HTML tag with a short maxlength but a long value attribute. I'd like the displayed text to show the end (right side) of the text, rather than the start (left side).
<input maxlength=10 value="A really really really long entry goes in here"/>
currently shows:
"A really r"
instead I'd like it to show:
"es in here"
Cheers,
Ian
Do you want the visible area to start from the right? you can use css and the following rule input {direction:rtl;}
rtl means from right to left
example: http://jsbin.com/ilejo4
PS: the value of maxlength in your html must be wrapped with quotes, also you have to set the type of the input
Add style="text-align:right" to the input tag.
If you only want to display information, what you can do is place a span inside a div, in the div write overflow:hidden, display flex, justify-content: flex-end;
.contenedor{
width: 100px;
background-color: black;
color: white;
border-radius: 5px;
display: flex;
justify-content: flex-end;
overflow:hidden;
padding: 5px;
}
<div class="contenedor"><span>12345555555566final</span></div>
Related
I'm trying to implement a custom design for an input element, which requires me to use the font Akko Pro Light. However, when I do so, the text strangely aligns vertically to the top of the line. This is true for the placeholder text as well as any text I actually write into the element.
While testing, other fonts do not produce the same problem.
try using justify-content: center; in css along with text-align: center; unfortunately without seeing the code it is hard to know what you are doing to find what is happening
Make a padding to create a space arround and line-height. Awoid non-standard fonts, it reduces the permonance of your site.
#field1 {
line-height: 30px;
padding: 10px;
}
field: <input type="text" value="field1" id="field1" /><br />
I have some data which needs to be formatted and I want to format it by using only css no javascript nothing.
So the question is I have this sample string:
Home - Office
Expected Output:
I want to format these words using css without inserting any div. Like the code can be in this way:
someData.push(`${origin.code} - ${destination.code}`); // code coming from the store file
<div>{value}</div> //prints the above code value here and this is from the js file
and the output will be like the above mention in the blockquote. But again I have some random list getting generated via push code. I don't want to use the div here. Is there a way by using css we can space them? Also I want to hide the " - " hyphen symbol. I have used word spacing but then again it's hardcode and also creates problem when resizing the window the last text stays at the original position it doesn't resize.
Any help will be appreciated.
text-align: justify-all; (MDN) would probably solve your problem with justification but it's unsupported.
AFAIK you need ONE child element, at least for hiding that dash and then you can use it for justifying those 2 words too.
➡️ Codepen
body {
max-width: 30rem;
}
p {
display: flex;
justify-content: space-between;
padding: 1rem 0;
outline: 1px dotted darkred;
}
.case2 > span:first-child {
display: none;
}
.case3 > span:first-child {
visibility: hidden;
}
<!-- node texts can be justified but you need some flex items too -->
<p>Home - <span>Office</span></p>
<!-- the 1st span can be hidden -->
<p class="case2">Home <span>-</span> <span>Office</span></p>
<!-- the dash-span can be both hidden and make node texts be justified -->
<p class="case3">Home <span>-</span> Office</p>
I have an input box and a button defined like so:
<form class="form-inline">
<input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/>
<button type="submit" class="btn btn-primary">Filter by Languages</button>
</form>
But the button shows up on the second line. Is it possible to position the button to the right of the input box?
I think you may be misunderstanding the use of input-block-level class. When this class is applied to an input field, the input field will take all available width.
As a result, any element that you place next to it, will roll over to the next line.
If you need the elements to be side by side, remove input-block-level and replace with a more appropriate class (input-mini, input-small, input-medium, input-large, input-xlarge, input-xxlarge or span classes).
I'm using input-xxlarge, but it's still not big enough. How do I
customize it? I've tried something like .input-xxlarge { width:
1500px; !important; height: 30px !important; } , but it doesn't
override it. – Parseltongue 13 mins ago
Inspect the element with developer tools (like in Chrome, Safari etc) and see if other widths/heights are overriding your explicit declarations. I tried changing it on my end and was successful when I changed the actual class in bootstrap.css
set widths desired to each element and float them:
form{overflow: hidden}
form input{
display: block;
width: 70%;
float: left;
}
form button{
display: block;
width: 30%;
float: left;
}
How can I get a <label> that has lots of text to display next to a radio input, without wrapping that text around the input.
In this jsfiddle: http://jsfiddle.net/JXrHh/1/
I use display: inline block; to get the format I want. But that will only work if the text is broken up with <br/> tags. Otherwise the text will drop below the radio input.
Without display: inline block; the text will wrap around the radio input.
I must be missing some small detail somewhere, can anyone help point it out?
You can alternatively use display: table-cell; on the <label> elements and there is no need to specify a width as the content will determine it:
http://jsfiddle.net/JXrHh/5
If you set a fixed width to your inline-block element then you do not need explicit line breaks:
http://jsfiddle.net/JXrHh/3/
label.inline {
display: inline-block;
width: 200px;
}
it's just a small thing.
if you have enough space you don't want to be a limited.
you can spread as wide as you wish .so limit it
label.inline {
display: inline-block;
width:200px;
}
I was wondering about the textarea box bit.ly has on the 1st page you log in where they state to "Shorten your links and share from here".
I was wondering how you would go about centering text in a textarea? I don't think there's a command, so how would you hardcode move it down a few spaces. You can't use html tags in the textarea so it's been difficult with or other methods
Are you sure it's a textarea and not just an <input type="text">? If it's the latter, you can achieve the effect quite easily with padding:
input[type=text] { font-size: 20px; padding: 5px; }
Edit: If it's a text area (say with one row), styling via padding works the same:
textarea { font-size: 20px; padding: 5px; }
Set textarea padding and margin 0 and set the line-height. Or it would be better to use padding like Kerrek posted
You can't center multi line text in a textarea but you can add padding.
<!doctype html>
<style>
input[type=text]{margin:0;padding:0;line-height:40px;font-size:40px;}
</style>
<input type=text>