1

Answers have been given for how to hide the double arrow on the right of the bootstrap 4 custom-select field as shown here. The resulting selection box still hides the text on the right hand side behind the now opaque arrows. I would like to be able to use as much of the right hand side space as on the left hand side for a display on designed for a mobile device. In other words, what additional changes can be made so the text is visible to the far right of the selection box. You can see the issue by adjusting your screen width.

.custom-select{
background-image: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="col-8">
    <div class="input-group">
      <select class="custom-select">
        <option>end of text string will hide behind opaque double arrow around here</option>
        <option>2</option>
      </select>
    </div>
  </div>
</div>
The Grand J
  • 338
  • 1
  • 5
  • 14
gordonC
  • 27
  • 6

1 Answers1

0

It's a padding issue. Use 'padding-right' to reduce the whitespace.

.custom-select{
background-image: none !important;
padding-right:5px !important; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="col-8">
    <div class="input-group">
      <select class="custom-select">
        <option>end of text string will hide behind opaque double arrow around here</option>
        <option>2</option>
      </select>
    </div>
  </div>
</div>

Note: 5px is just an example, you will likely want to make sure padding on the left and right match.

GBDev
  • 82
  • 7
  • 1
    Your solutions works. For other users note Safari on the iphone has pretty aggressive caching, so you will need to force it to flush before the changes will display. – gordonC Aug 13 '20 at 03:37
  • @gordonC Thanks! Don't forget to accept if this question is answered. – GBDev Aug 13 '20 at 12:23