-2

Есть position: relative родительский элемент, размер которого должен быть равен размеру вложенного в него дочернего position: absolute элемента.

Ширины должны варьироваться в зависимости от размера дочерних элементов, т.е. просто задать размер в пикселях нельзя, нужна именно зависимость.

Как это сделать?

Использую react-select и в нём примерно такой код:

https://codesandbox.io/s/9o4rkklz14

Есть сам филд в который вложен див с дропдауном. Нужно чтобы див с филдом растягивался по размеру самой длинной опции в дропдауне.

2
  • Что-то Вы, похоже, не то делаете. position: absolute нужен именно для того, чтобы позиционировать элемент относительно родителя (в том числе подгонять размер), а не наоборот. Покажите Ваш код и объясните, какой нужен результат 11 дек 2018 в 14:37
  • при position: absolute элемент выпадает из общего потока и не занимает "какого-то размера"
    – ThisMan
    14 дек 2018 в 8:01

1 ответ 1

1
+50

Можно поиграться чисто стилями. Останется только отрефакторить, чтобы селектор был не div, а класс и отпозиционировать нормально выбранное значение и плейсхолдер. codesandbox.io

index.js:

import React from "react";
import { render } from "react-dom";
import Select from "react-select";

import "./styles.scss";

const App = () => (
  <div className="container">
    <div className="select-wrapper">
      <Select
        className="select"
        autosize={false}
        //menuIsOpen={true}
        options={[
          {
            value: "1",
            label: "1 Label"
          },
          {
            value: "2",
            label: "2Label Label Label Label Label"
          }
        ]}
      />
    </div>
    <div className="content">Some text below</div>
  </div>
);

render(<App />, document.getElementById("app"));

styles.scss

html,
body {
  background-color: papayawhip;
  font-family: sans-serif;

  h1 {
    color: tomato;
  }
}

.container {
  position: relative;
  padding-top: 40px;
}

.select-wrapper {
  display: inline-block;
  position: absolute;
  top: 0;
}

.select {
  width: auto;

  div {
    position: relative;
    top: initial;
  }
}

.content {
  display: block;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.