Prevent resizing of Bootstrap DropDown Menu on selection using CSS

Last Reply 9 days ago By dharmendr

Posted 9 days ago

Hi

I used bootstrap4 and put a dropdown menu list in page

when I select an item from the dropdown list it changes the dropdown list size

I don't want to change dropdown list size I want when I select an item from the dropdown list it doesn't change the size of the dropdown list

Best regards

Neda

You are viewing reply posted by: dharmendr 9 days ago.
Posted 9 days ago

Hi nedash,

Set the width of Button.

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".dropdown-menu li a").click(function () {
                $(this).closest('.dropdown').find(".btn:first-child").text($(this).text());
                $(this).closest('.dropdown').find(".btn:first-child").val($(this).text());
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 200px !important;">
                        واگذاری را انتخاب نمایید
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li><a target="_blank" class="dropdown-item" id="A1" runat="server">Transfer 1</a></li>
                        <li><a target="_blank" class="dropdown-item" id="A2" runat="server">Transfer 2</a></li>
                        <li><a target="_blank" class="dropdown-item" id="A3" runat="server">Transfer 3</a></li>
                    </div>
                </div>
            </td>
            <td>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 150px !important;">
                        Menu 2
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li><a target="_blank" class="dropdown-item" id="A4" runat="server">Transfer 4</a></li>
                        <li><a target="_blank" class="dropdown-item" id="A5" runat="server">Transfer 5</a></li>
                        <li><a target="_blank" class="dropdown-item" id="A6" runat="server">Transfer 6</a></li>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Demo