-1

I'm using a bootstrap drop-down menu with additional information. These are added with the span badge. In addition, the menu can also be scrolled.

    @foreach (var item in Lieferanten)
    {
        open = Model
            .Where(m => m.Bezahlt == false)
            .Where(e => e.Lieferant.Kurzname == item)
            .Count();

        <li>
            <a asp-area="" asp-controller="Er" asp-action="Index"
               asp-route-qry_payed="0"
               asp-route-qry_lief="@item">@item<span class="badge">@open</span></a>
        </li>
    }

Now I have the problem that the "width" of the menu is too small for me.

enter image description here

I can add the following css code, but this is not realy the solution I want.

.dropdown-menu > li > a {
width: 220px;}

With this code also the menus without additional values are too large. If I have an entry that is larger than 220px, that doesn't fit either.

Does anyone have an idea how to solve this?

Paul_412
  • 47
  • 7

1 Answers1

1

The solution is to make a dynamic element.

Try using display: inline;.

Here is an example:

div {
    background-color: black;
    width: 500px;
    height: 500px;
    display: inline; /* Add this */
    color: white;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tristique et egestas quis ipsum suspendisse ultrices. Augue mauris augue neque gravida in fermentum et sollicitudin. Sed sed risus pretium quam vulputate dignissim suspendisse. Mauris ultrices eros in cursus turpis massa. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Tortor posuere ac ut consequat semper viverra nam libero justo. Sit amet purus gravida quis blandit turpis cursus in. Tincidunt augue interdum velit euismod in pellentesque massa. At tellus at urna condimentum. Non sodales neque sodales ut etiam sit amet nisl. Adipiscing vitae proin sagittis nisl rhoncus mattis.</div>
Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35