0

I am using laravel 5.6 and react.js for my website. I have a layout file with with 

<body>
    <div id="app">
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

I had extended this app.blade.php is all the views. Body CSS : 

body {
    padding-top: 80px;
    font-family: 'Muli', sans-serif
}

for one of the react component (Error pages) I want my body padding zero. So that when Error Page loads zero padding applied to body but for rest components padding does not overload . Here Error page have relative_particle class

 <body>
    <div id="app">
       <div data-reactroot="">
       <div>
         <!-- react-empty: 8 -->
       </div>
           **<div class="relative_particle">
           </div>**
       </div>
    </div>
</bod>

I want those components having relative_particle class div should have 0 padding body css . What can be done to solve it . Note : I am not using jquery lib in my project .

Augustin R
  • 4,694
  • 2
  • 13
  • 38
Amit Kumar Kannaujiya
  • 120
  • 1
  • 18

1 Answers1

0

Add this style for your error pages:

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Then you can do the following to add this class to the body:

document.body.className += ' ' + 'nopadding';

Make sure you run above script only on error pages. If you can't differentiate them, check if relative_particle class exists, then run above script.

You can see more details on manipulating body classes here.

Also make sure you wait for the DOM.

TValerii
  • 91
  • 5