How to increase size of dropdown menu?

December 13, 2021

I am using beercss and alpinejs I need did dropdown menu, but it’s width is smaller than it’s context.

<nav class="wrap">
  <div class="tabs right-align">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    <a x-data="{ active: false }">
      <button @click="active = !active">
        <span>Login</span>
        <div x-show="active" class="dropdown">
          <a>
            <label>Complementary text</label>
          </a>
        </div>

      </button>
    </a>

  </div>

</nav>

How to fix it?

https://codepen.io/bubnenkoff/pen/VwMmEgb

>Solution :

Because your button is on the right, the dropdown disappears outside of the visible area. According to the docs you can use the class list "dropdown left no-wrap" to position the dropdown ("left") and have the width based on the content ("no-wrap").