Question: I'm creating a custom input selector. It uses a text input to display the selection and a button for a user to make selection. It's similar to the snippet below:

```js
inputDisplay = document.getElementById("inputDisp");
choosePath = () => {
 const newpath = prompt("Enter new long path", "a/long/long/long/long/long/verylong/long/long/long/long/long/long/verylong/long/path/to/folder/");
 inputDisplay.value = newpath;
}

document.getElementById("btnSel").addEventListener("click", choosePath
);
```

```css
input {
  width:100%;
}
@media screen and (max-width: 640px){
  input{
  text-align:right;
  }
}
```

```html
<input id="inputDisp" readonly value="a/path/to/a/folder/">
<button id="btnSel">Select path</button>
```

What I want is that as the user resizes the screen, it will align the text to the right if theres not enough space left to display the whole path. I thought I could use media queries, but if you input a short path and it aligns right, it does not look so good. 

Is there a way I could align the contents of the input box to the right only when the text is too long for the textbox?

Answer: 
There is no css way to achieve your goal, because this would require to access the funtional layer instead of the presentation one. You still can manage to do this by using some javascript event handlers. 

Just register a function which checks your inputs actual contained text length and toggles a css class with `text-align:right;` onto the `resize` event of your window and the `keydown` event of your input element. 

See the DOM event documentation on w3school for more information about the events: 
<https://www.w3schools.com/jsref/dom_obj_event.asp>

You can check the current text length within the input like this: 

```
 var value = document.getElementById('inputDisp').value;
 if (value.length > 20 && window.innerWidth <= 640) {
   // Toggle CSS class with text alignment right
 } else {
   // Toggle CSS class with text alignment left
 }

```
You can use `direction rtl/ltr` to solve this problem:

```js
inputDisplay = document.getElementById("inputDisp");
choosePath = () => {
 const newpath = prompt("Enter new long path", "a/long/long/long/long/long/verylong/long/long/long/long/long/long/verylong/long/path/to/folder/");
 inputDisplay.value = newpath;
}

document.getElementById("btnSel").addEventListener("click", choosePath
);
```

```css
input {
  direction: ltr;
}
@media screen and (max-width: 640px){
  input{
    direction: rtl;
  }
}
```

```html
<input id="inputDisp" readonly value="a/path/to/a/folder/">
<button id="btnSel">Select path</button>
```