Is it possible to change CSS dynamically? in Laravel blade

Question

Is it possible to change CSS dynamically?

I want to apply class=sheet padding-top: 28mm; when the size of $anArray is less than 30. When this array is more than 30 then padding-top: 28 * 2 mm; and when this array is more than 60 padding-top: 28 * 3 mm;

Do I have to make

.sheet2 {
    padding-top: 56mm;
}
.sheet3 {
    padding-top: 84mm;
}

And change the class selector by Javascript?

I would like to use a smarter way. :(

<section class="sheet">
    {{ $anArray }}
    if(anArray)

another.css

.sheet {
    box-sizing: border-box;
    page-break-after: always;
    padding-top: 28mm;
}

Mohsen Nazari · Accepted Answer · 2021-07-14 09:27:38Z

1

You have to make sure not to override the padding-top: 28mm; so try this:

@php
    $anArraySize = count($anArray);
@endphp

<section class="sheet" style="padding-top: {{ 
    ($anArraySize < 30) ? '28mm' : 
    ($anArraySize < 60) ? '56mm' : 
        '84mm';
}}">

You can apply the same logic for class inclusion:

.pt-28 {
    padding-top: 28mm;
}
.pt-56 {
    padding-top: 56mm;
}
.pt-84 {
    padding-top: 84mm;
}

@php
    $anArraySize = count($anArray);
@endphp

<section class="sheet {{ 
    ($anArraySize < 30) ? 'pt-28' : 
    ($anArraySize < 60) ? 'pt-56' : 
        'pt-84';
}}">

edited Jul 14, 2021 at 9:27

answered Jul 14, 2021 at 8:39

Mohsen Nazari

1,3491 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Binay Regmi · Accepted Answer · 2021-07-14 05:59:45Z

0

You do something like this

Define one class and add your required css

.pt-28 {
   padding-top:28mm;
}

Now in your blade you can do like this

<section class="sheet {{ count($anArray) < 30 ? 'pt-28' : '' }}">

OR

<section class="sheet @if(count($anArray) < 30) pt-28 @endif">

Or you can directly add inline css like this if you want

<section class="sheet" style="padding-top:{{ count($anArray) < 30 ? '28mm' : '' }}">

answered Jul 14, 2021 at 5:59

Binay Regmi

1

1 Comment

Mohsen Nazari Over a year ago

You are not considering the cases for less than 60 and more than 60.

Collectives™ on Stack Overflow

Is it possible to change CSS dynamically? in Laravel blade

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related