Container with text overflow not being obeyed

user_2590004 0
Viewed 35

I have an angular App where I am displaying a drop down which in general works. However, when the form is displayed on a mobile screen or your browser is resized to small. The drop down sometimes displays on the next line i.e. not next to the label.

I have figured out that this only happens when the selected item in the drop down is longer than the container itself. Ideally, the dropdown should behave like the other inputs in the form and have the maximum width of its container and therefore obey the text-overflow.

This is basically a boostrap form...I have provided an example and taken the guts out of the dropdown as I have found the offending elements so just need some css help in making this work.

Codepen

<div class="small-container">
  <div class="row">
    <label class="col-label">Label 1</label>
    <div class="col-container">
      <input type="form-control" type="text" />
    </div>
  </div>
  <div class="row">
    <label class="col-label">Label 2</label>
    <div class="col-container">
      <div class='ng-select'>
        <div class="ng-select-container">
          <div class="ng-value-container">
            <div class="ng-value">
              <span>This is a very long select option</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.small-container {
  width: 300px;
  padding: 10px
    
}

.col-label {
  width: 150px;
}

.col-container {
  flex: 1;
}

.col-container input {
  width: 100%;
}

.row {
  margin-bottom: 12px
}

.ng-select {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
}

.ng-select-container {
  border: solid 1px #111;
  display: flex;
  overflow: hidden;
  position: relative;
}

.ng-value-container,
.ng-value{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

This is what it looks like when there is enough room to display the contents..

enter image description here

And when there is not

enter image description here

flexbox css html
2 Answers

You need to use:

.target {
    white-space: nowrap;
}

If you want to add ellipsis (...) whenever text overflows, the use:

.target {
    white-space: nowrap;
    text-overflow: ellipsis;
}

This is generally good practice to indicate to the user that some text is hidden.

user_24684170

When you're setting hidden to an element know that you ought to set the height or width or both of them try this

.ng-value{
Height:10px;
Overflow: hidden;
}

I hope it helps

user_163358920
Related