0

I am removing the padding of the parent component in its child component

This my component structure. Taken from the browser developer tool.

enter image description here

I have changed the padding of nb-layout-column (marked as blue in the above image) from the child component ngx-home-page.

in ngx-home-page scss

::ng-deep
  .nb-theme-default
     nb-layout
     .layout
     .layout-container
     .content
     .columns
     nb-layout-column {
     padding: 0;
   }

it is working fine for the nb-layout-column, when it has child ngx-home-page.

issue is

The style applied to the nb-layout-column after leaving the ngx-home-page(style is applying to other pages, but i have styles in ngx-home-page).

i need the following

case:1 while viewing ngx-home-page

<nb-layout-column>//it should have padding 0
 <ngx-home-page>
 </ngx-home-page>
</nb-layout-column>

case:2 while viewing other-pages

<nb-layout-column>//it should have default padding
 <other-page>
 </other-page>
</nb-layout-column>
marc_s
  • 675,133
  • 158
  • 1,253
  • 1,388
Udhayakumar
  • 73
  • 2
  • 9
  • Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Tr1monster Jan 20 '21 at 10:29
  • You can set the padding (or use margin) in the child component instead. Or use margin there. Changing the parent based on the child could make your life unnecessarily complicated. There's some other approaches as well, but I would try to avoid sharing the state. – Rob Monhemius Jan 20 '21 at 11:36
  • @Tr1monster No. – Udhayakumar Jan 20 '21 at 12:12

0 Answers0