SCSS - Multiple Dialog Cascade Alignment - React Bootstrap

·

1 min read

Let's assume you are using SCSS as css preprocessor, then it is a cakewalk to align all the dialog boxes one by one using z-indexes so that they can cascade.

I have used this approach to cascade multiple dialogs in my react projects.

Here is a piece of code, which can help with the same.

@for $i from 1 through 6 {
  $zIndexBackdrop:  #{1000 + (5 * $i)};
  $zIndexContent:  #{1000 + (5 * $i) + 2};
  .modal-backdrop.show:nth-of-type(#{$i}) {
    z-index: $zIndexBackdrop;
  }
  div[role="dialog"][aria-modal="true"]:nth-of-type(#{$i}) {
    z-index: $zIndexContent;
  }
}

Above is a excerpt, but you can write this as per your requirement, increase the loops, or add some more properties and make your own curry.

This is just a jugaad we made using scss using loops, any how once this is processed will generate the multiple lines of css code which we can also write.
That's where preprocessors come in place, to reduce the number of lines

That's all for today.

Ignite the spark, Be the change.