Reputation: 31

Expand div width with content

I'm using Tailwind framework to build a Dropdown component.

I'm trying to extend the div of the dropdown with the contents of it. As the e-mail gets bigger, the wider the dropdown should be. If I remove the absolute of the dropdown, the hole menu goes somewhere else.

This is my HTML:

<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <div class="relative inline-block text-left">
    <div>
      <span class="rounded-md shadow-sm">
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
            >
              Options
              <svg
                class="-mr-1 ml-2 h-5 w-5"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </span>
    </div>
    <div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
      <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <div class="flex items-center px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
          </div>
          <div class="ml-2">
            <p>Tom Cook</p>
            <p class="font-bold truncate">[email protected]</p>
          </div>
        </div>
        <div class="border-t border-gray-200"></div>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Your Profile
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Settings
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
              Sign out
            </a>
      </div>
    </div>
  </div>
</body>

</html>

Thanks.

Upvotes: 2

Answers (2)

Isti115

Reputation: 2746

I'm not familiar with tailwind, but by checking the default styles it assigns in the inspector I determined that the problem is caused by images (img tags) having a default max-width: 100% assigned to them, which makes the layout calculation confusing in this case, since it's container does not have a given width.
This can be solved by adding the max-w-none class to the image to disable this rule like this:

<div class="flex-shrink-0">
    <img class="h-10 w-10 rounded-full max-w-none" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>

Upvotes: 2

Tibbelit

Reputation: 1335

One way is to use the CSS-property width: max-content;, like below (I added an id to the relevant drop down for easier reading).

#my-drop-down .origin-top-left {
  width: max-content;
}

<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <div class="relative inline-block text-left" id="my-drop-down">
    <div>
      <span class="rounded-md shadow-sm"> 
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
            >
              Options
              <svg
                class="-mr-1 ml-2 h-5 w-5"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </span>
    </div>
    <div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
      <div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <div class="flex items-center  px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
          </div>
          <div class="ml-2">
            <p>Tom Cook</p>
            <p class="font-bold truncate">[email protected]</p>
          </div>
        </div>
        <div class="border-t border-gray-200"></div>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Your Profile
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
              Settings
            </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
              Sign out
            </a>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 2

Expand div width with content

Answers (2)

Related Questions