0

I have a drop down.

<div class="row">
    <div class="col-md-4 col-sm-12">
        <div class="col-md-5">
            @Html.Label("Project", htmlAttributes: new { @class = "Label_small_bold" })
        </div>
        <div class="col-md-7">
            @Html.DropDownListFor(model => model.InspectionReport.ProjectID, new SelectList(ViewBag.ListProjects, "ID", "ProjectNo"), "-Select-", new { @class = "form-control  input-sm pull-right text-box single-line" })
        </div>
    </div>
...

It's good but when I get an item with long text then it goes out of the window to the right.

Why? enter image description here

Rainbow
  • 6,772
  • 3
  • 11
  • 28
Stacky
  • 57
  • 1
  • 8
  • You should post your select and option css classes, once you do it, you will notice your error... `text-box single-line` sounds as a prime suspect there. – skobaljic Jun 29 '19 at 21:01
  • try this https://stackoverflow.com/questions/13806802/twitter-bootstrap-dropdown-goes-outside-the-screen – jmercier Jun 29 '19 at 21:15
  • @jmercier: I tried everything but not working – Stacky Jun 30 '19 at 08:21
  • @skobaljic: tried but not working bro – Stacky Jun 30 '19 at 08:22
  • Go to Firefox browser inspector > Style editor, there you can disable styles individually - click on eye icon, try to locate your problem. You can also inspect the option element and find out which selector defines its width... can't tell/help more, because you posted zero code in here. – skobaljic Jun 30 '19 at 11:09
  • adjust the width of dropdown menu and apply `word-break:break-word` – Sai Manoj Jul 02 '19 at 04:58

0 Answers0