How can I make the block containing text in Webflow grow to the same height as the text, without it pushing up or down the "hide text" button?
To make the block containing text in Webflow grow to the same height as the text while keeping the "hide text" button in a fixed position, you can use a combination of flexbox and absolute positioning.
First, select the block containing the text and give it a class name. For this example, let's call it "text-container".
Now, let's set up the structure. Wrap the text inside a div element and give it a class name "text-wrapper". This wrapper element will allow us to control the height of the text block.
Next, select the "text-container" and apply a flexbox layout. In the Flexbox settings panel, set the following properties:
- Display: Flex
- Justify Content: Start
- Align Items: Start
This will ensure that the text container expands based on the height of its content.
Now, select the "text-wrapper" and apply the following settings:
- Position: Relative
- Height: 100%
This will set the height of the wrapper element to 100% of its parent (the text container).
Next, create a div element as a sibling of the "text-wrapper" within the "text-container" div. This div will contain the "hide text" button. Give this div a class name, such as "button-container".
Now, select the "button-container" and apply the following settings:
- Position: Absolute
- Bottom: 0
- Right: 0
This will position the button container at the bottom-right corner of the text container, regardless of the height of the text.
Lastly, make sure the button container is not interfering with the height of the text. To achieve this, select the "text-container" and adjust its padding-bottom value so that the button container remains visible.
With these settings, the "text-container" will grow to match the height of the text, and the "hide text" button will remain fixed at the bottom-right corner, without being pushed up or down.
Remember to preview and adjust the values according to your specific layout and content.