Why doesn't % work when styling height ?
See original GitHub issueHey,
Thanks for the library.
I have an issue with styling of my component.
I’m trying to make my element responsive using %
in CSS
.
The problem is that when I use %
it doesn’t work but when I change to a static value (px
or a number), it works.
My code (that doesn’t work):
const style = css({
height: "100%", //if I change this to a static value (`px` or a number), it works
});
<div className="mobile_chat_content">
<ScrollToBottom mode="bottom" className={style}>
<button onClick={scrollToBottom}>
Click me to scroll to bottom
</button>
{messages.map((message, i) => (
<Message
key={message.id}
text={message.content}
/>
))}
</ScrollToBottom>
</div>
I want my component to be responsive to the container, I can not change this to a static value If anyone has suggestions to help me, it would be cool to let me know. Thanks in advance.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:4
- Comments:5
Top Results From Across the Web
height style property doesn't work in div elements
The height property does not apply. The height of the content area should be based on the font, but this specification does not...
Read more >Why is height not working? - Medium
If the content is fluid, height will stretch indefinitely to fit it. If set relatively, element's height will be relative to the height...
Read more >css - height % does not work - OutSystems
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are...
Read more >CSS height not change - HTML & CSS - SitePoint Forums
I change the height passing the style css inside html tag but i don't want to make with this way <div class="panel-body" style="height: ......
Read more >height - CSS: Cascading Style Sheets - MDN Web Docs
The height CSS property specifies the height of an element. By default, the property defines the height of the content area.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yes, this is a major bummer for me as well. I need my height to be responsive to fit the entire screen height.
What I did was:
It works, but again, I am not happy with the hack. @compulim , is there a reason this does not work when the height is set in %?
UPDATE: The component actually works as expected even with % height without needing any hacks. The key is to set the proper CSS for the < ScrollToBottom > component itself. This is mentioned in the documentation (ROOT_CSS), but it’s purpose is not very clear. Anyway, just set the following CSS on your < ScrollToBottom > component and you’ll be fine:
It works but as you said, it’s not the best solution. Thanks! Anyone else ?