How to wrap text that is displayed in a <div> with bootstrap form-control and dropdown classes? - css

Question

I have a razor page where I am displaying the list of selected items from a dropdown menu in a div tag. How can I get #FormattedText auto wrap if the list of items selected exceeds the size of the div.
I tried to apply word-wrap and white-space styles and neither of them worked. The content extends beyond the and the scroll bars are displayed. How can I wrap the content within the ? Thanks for any suggestions!
<style>
.dropdown {
word-wrap: normal;
white-space: normal;
}
</style>
<div class="form-control col-md-4 dropdown dropdown-toggle">
#FormattedText
<div class="dropdown-menu">
#foreach (var item in Items)
{
<div>
<input type="checkbox" #bind="item.IsUpdated" />
<label for="#item.Name">#item.Name</label>
</div>
}
</div>
</div>
List<string> selectedItems = new List<string>();
public string FormattedText
{
get
{
selectedItems.Clear();
selectedItems.AddRange(Items.Where(s => s.IsUpdated).Select( item => { return item.Name; }));
if (selectedItems.Any())
{
return string.Join(",", selectedItems.ToArray());
}
}
set
{
selectedText = value;
}
}

Answer 1

First of all, your Bootstrap .dropdown structure is not correct. If you look at their examples, .dropdown-toggler and .dropdown-menu need to be the same level, wrapped by .dropdown. Also each item in .dropdown-menu needs to have .dropdown-item class as well.
So you need to change the structure to:
<div class="form-control col-md-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler"
data-toggle="dropdown">
#FormattedText
</button>
<div class="dropdown-menu">
#foreach (var item in Items)
{
<div class="dropdown-item">
<input type="checkbox" #bind="item.IsUpdated" />
<label for="#item.Name">#item.Name</label>
</div>
}
</div>
</div>
It will look something like this:
The reason why the formatted text, wrapped in the button, is not wrapping is because .dropdown-toggler has style white-space: nowrap;. You can get rid of that style or use Bootstrap utility class .text-wrap on the .dropdown-toggler
<div class="form-control col-md-4">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
data-toggle="dropdown">
#FormattedText
</button>
...
</div>
Lastly the dropdown is out of the .form-control's border. That's because .form-control has a fixed height. You can set its height style to auto, or use Bootstrap utility class .h-auto:
<div class="form-control col-md-4 h-auto">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
data-toggle="dropdown">
#FormattedText
</button>
...
</div>
Now the whole thing looks like this:
demo: https://jsfiddle.net/davidliang2008/3bykc4rf/14/