CSS - long string in input field pushes content

1

I’m struggling to solve this CSS problem. I’m using a <ul> to display user entries with <li>. One of the <li> holds an input field (type text). The problem comes in when I type a long string into the input (like mmmmmmmmmmmmmmmmmmmmmmmmm). It pushes the entire content to the left. I’ve tried overflow: hidden on the <ul>, even removed the padding with no luck.

<div class="container">
  <ul class="list">
    <li class="item">some item</li>
    <li class="item inputHolder">
      <input type="text" />
    </li>
  </ul>  
</div>

* {
  box-sizing: border-box;
}
.container {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.list {
  clear: both;
  list-style: none;
  display: block;
  border: 1px solid green;
  width: 100%;
  height: auto;
  max-height: 100px;
  min-height: 45px;
  margin: 0;
  padding: 10px 5px 3px 40px;    
  font-size: 15px;
  line-height: 22px;
  color: #9ea5b1;
  vertical-align: middle;
  overflow-y: scroll;
  overflow-x: hidden;  
}
.item {
  color: white;
  float: left;
  position: relative;
  max-width: 200px;
  margin: 0 5px 5px 5px;
  padding-right: 20px;
  font-size: 15px;
  font-weight: 300;
  text-align: center;
  white-space: normal;
  background-color: #4bc3f9;
  border: none;
}
.inputHolder {
  width: 10px;
}

input {
  min-width: auto;
  max-width: auto;
  width: auto;
  padding: 3px 8px;
  background-color: #fff;
  margin: 2px 0;    
}

Note: .inputHolder {width: 10px} is used to have the cursor always behind the last entry, ie .item

I’m trying to achieve that the text scrolls within the input, without pushing everything to the left. Hope that makes sense.

I’ve got a pen here if that’s easier.

2

hi @erikvoigt

first impression, you’ve got a lot of width conflicting, although still the last class selector win.

why dont try make it simple for start.
try only setting up the widht for the input field and if it okay, you can setting the rest of your element.

regards

3

hi @erikvoigt, that is probably the width of your container is small relative to the input size, and the paddings you applied. For example, you could try modifying the padding: 10px 5px 3px 40px; styling applied to list class. Trying lower values for left padding (instead of 40px)

4

Thanks for the reply. Unfortunately those are most of the styles already in there (using a plugin with styles) I’ve removed the ones that have nothing to do with my problem. like drop shadows.

5

Thanks for the reply. Removing thew padding does help, but unfortunately it’s needed for the overall layout. The problem seems to be the width of the input, but only if you type in a very long string.