Lightrun
question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why doesn't % work when styling height ?

See original GitHub issue

Issue Description

Hey, 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:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:5

github_iconTop GitHub Comments

1reaction
pranavmehtacommented, Aug 14, 2020

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:

  1. create a wrapper div element with height: 100%; overflow: hidden that wraps component
  2. In the useEffect hook, get the clientHeight of this element in and set it to the actual element you are trying to scroll to the bottom.

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:

.ScrollToBottom {
  height: 100%;
  overflow-y: auto;
  width: 100%;
}
1reaction
johannbuscailcommented, Jul 30, 2020

It works but as you said, it’s not the best solution. Thanks! Anyone else ?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found