All elements under two-line left-side value shift downwards
Closed this issue · 9 comments
Whenever the user's pointer hovers over a row whose left-side value is two-lines long, all the elements beneath that row move down slightly.
This can be a bit annoying when you are scrolling and looking at multiple elements quickly.
See this gif:
Sure, go ahead and send a PR. :)
Sure, go ahead and send a PR. :)
I have got this response in my mail can i work on it or its for RizwanSyed357
@noahwalugembe go ahead and solve it. I am working on other things now. Wish you all the best.
Thanks @RizwanSyed357
Sure, go ahead and send a PR. :)
@april I have fixed the .panel-list-item css by hiding overflow. actuary at this point elements with two line sentence left or right side can't cause downer elements to shift on mouse hover.
Can i make this as my first git commit.
/* overrides to extension.css */
.panel-list-item {
height: inherit;
min-height: 24px;
cursor: text;
overflow: hidden;
max-height: 35px;
}
Can I ask why the max height? But sure.
Can I ask why the max height? But sure.
When you resize the browser window so as to mimic mobile device screen panel-list-item with much text word-breaks or over flows hence creating more lines and this affects the div heights of over elements below. Hence resulting in effects like (div slightly shifting from their position when hovering on an element that changes size above it)
With max-height: 35px; or 40 px; I'm telling the container to not expand more than optimal 30px in height so as not to affects other div heights. and then i use overflow: auto instead. That will only show scrollbars when the content overflows
Before implementation
After implementation
Hi @april is this work okay
Sorry, but I'm afraid having scrollbars for an individual field is a very poor experience. It should work the same as now but without the slight shifting upon hovering. Also each line is huge (requiring a lot of scrolling), and this doesn't look anything like the original implementation.