CODEWITHSUNDEEP
htmlcss
Warrio
Warrio

Reputation: 1913

text-align for input tag

I use the following code to align the content of an input text field:

Path <input type="text" value="http://stackoverflow.com/questions" style="text-align: right;">

Problem:
This does not work in the case of a long text.

Since I am displaying a folder path, I am interested in displaying the last folder.
I went through many posts posts related to text alignment, but they all advise to use "text-align: right".

Upvotes: 6

Views: 174

Answers (3)

Shamanth
Shamanth

Reputation: 216

Try doing like this,add this attribute only to this tag dir="rtl"

<input type="text" value="http://stackoverflow.com/questions" dir="rtl">

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

The rtl hack is nice, but makes it hard if you actually want to change the value. And if you don't want that, why make it an input in the first place?

So alternatively, you can set the cursor at the end of the input using a piece of Javascript:

// Wrap it in a function, if you like.
function selectEnd(input) {
    var pos = input.value.length;
    input.setSelectionRange(pos, pos);
    input.blur(); // Switch from not focus..
    input.focus(); // .. to focus, to force the cursor into view.
}

// Call it for your input.
selectEnd(document.getElementById('path'));
Path <input id="path" type="text" value="http://stackoverflow.com/questions" style="text-align: right;">

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99484

You could change the direction of the text input to rtl so that it would show the last part of the path.

For further info, refer to my answer to a similar question here:

input[type="text"] {
  /* text-align: right; */
  direction: rtl;
}
Path <input type="text" value="https://stackoverflow.com/questions">

Upvotes: 4

Related Questions