Расширьте ширину div с содержанием - PullRequest
Новая
       41

Расширьте ширину div с содержанием

2 голосов
/ 29 апреля 2020

Я использую фреймворк Tailwind для создания выпадающего компонента.

Я пытаюсь расширить div выпадающего меню содержимым. По мере того как электронная почта становится больше, чем шире должен быть раскрывающийся список. Если я удаляю absolute раскрывающегося списка, меню отверстий переходит в другое место.

Это мое 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">tom@example.com</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>

Спасибо.

Ответы [ 2 ]

2 голосов
/ 30 апреля 2020

Я не знаком с попутным ветром, но, проверив стили по умолчанию, которые он назначает в инспекторе, я определил, что проблема вызвана изображениями (тегами img), которым назначено max-width: 100% по умолчанию, что делает расчет компоновки в этом случае сбивает с толку, поскольку его контейнер не имеет заданной ширины.
Эту проблему можно решить, добавив класс max-w-none к изображению, чтобы отключить это правило следующим образом: 

<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>
0 голосов
/ 29 апреля 2020

Один из способов - использовать CSS -property width: max-content;, как показано ниже (я добавил идентификатор в соответствующий раскрывающийся список для удобства чтения). 

#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">tom@example.com</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>
...