New Theme CSS bug


(dimu) #1

recently I have made custom CSS theme with base, But I am currently getting this bug, could not solve with some CSS in theme, any help

thanks


(Carlo) #2

I believe you should play with z-index property with css.

But I think you should give more details to get better help.


(dimu) #3

It only affect on Topic reply , edited with Material Stock theme and add custom CSS


(Joshua Rosenfeld) #4

Can you share the custom CSS? I haven’t seen this issue with the Material Stock theme before. In particular, are you using z-index anywhere in the custom CSS?


(dimu) #5

yes

.timeline-container {
 z-index:1 !important
}

any how this could be issue ?


(Joshua Rosenfeld) #6

I’m not a CSS expert (@awesomerobot can likely give a better answer) - but z-index controls the “order” elements are displayed on the screen. Lower numbers display in front of higher numbers. So you’re CSS is telling the browser to display the entire timeline-container in front of everything else. Further, you specified !important which forced your z-index to override any other z-index values for the targeted element.

Two suggestions:

  1. Don’t change the z-index of the timeline container. There should be no need to adjust the stack order of the UI.
  2. Don’t use !important unless absolutely necessary. It tends to over-target elements and cause issues. If you find something in Discourse that cannot be targeted without using !important, please let us know.

(Kris) #7

Essentially correct, I wouldn’t say “order” (X/Y axis) but “layer” (Z axis). With the z-index you’re stacking elements on top of each other.

What z-index: 1; is doing is putting everything inside of the .timeline-container below other elements with a higher z-index. So the dropdown menu inside of .timeline-container, which normally has a high z-index is being moved below.

As @jomaxro said, I’d avoid altering the z-index here if possible. If you’re using z-index to solve some issue, there’s likely another way around it.


(dimu) #8

Thanks for you support , I just changed the nu: to highers with removing !important in my CSS
& got the result

2

any How this bug will happen again with upcoming Discourse Updates