Can CSS be altered dynamically in Laravel blade?

Is there a way to dynamically change CSS?

I am trying to set the class=sheet padding-top: 28mm; when the size of $anArray is less than 30. If the array has more than 30 elements then apply padding-top: 28 * 2 mm;. Finally, if the array exceeds 60, use padding-top: 28 * 3 mm;

Do I really need to create:

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

And change the class selector using JavaScript?

I want to find a more efficient method. :(

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

another.css

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

Answer №1

Ensure that you don't overwrite the padding-top: 28mm; property by following this approach:

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

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

You can use a similar strategy for adding classes based on conditions:

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

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

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

Answer №2

Here is one way to achieve this

Create a single class and include the necessary CSS

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

Then, in your blade file, you can implement it like this

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

Alternatively, you can also use conditional statements like below

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

If preferred, inline CSS can also be added directly

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The partition.nodes(root) function in d3.js does not assign values to the x or dx properties of the nodes

I am currently experimenting with d3.js to create a unique icicle tree visualization using data sourced from a .json file. The challenge I'm facing lies in the fact that the x and dx attributes of the partition nodes are consistently being set to 0. M ...

javascriptjsonnode.jsd3.js

List of coordinates extracted from PolylineMeasure plugin in the React Leaflet library

I have 3 different scripts: 1. PolylineMeasure.jsx import { MapControl, withLeaflet } from "react-leaflet"; import * as L from "leaflet"; class PolylineMeasure extends MapControl { createLeafletElement() { return L.control.poly ...

javascriptreactjsleafletnext.jsreact-leaflet

MongoDB Integration of Collections - No Data Population

Having trouble merging a client and an account collection. When I use res.send(client), only the account id's are returned. Unsure how to include account information in clients. Have seen one to many solutions, but struggling with this two-way relati ...

javascriptnode.jsmongodbexpress

When setting an attribute on load, Javascript may not properly apply the change to the attribute

I designed a webpage where images have a fade-in effect using a CSS class. Initially, 4 images load with the desired effect. However, I encounter an issue when trying to apply the same effect to a new image that appears upon clicking a button. Below is th ...

javascripthtml

Using JavaScript/jQuery to tally characters

Here is the code snippet that I am currently working with: PHP <input style="color:red;font-size:12pt;font-style:italic;" readonly="" type="text" name="q22length" size="3" maxlength="3" value="50"/> <textarea onkeydown="textCounter(doc ...

javascriptjqueryonkeydownonkeyup

ngRepeat does not iterate through an array

Presented below is an object: { "_id" : ObjectId("5454e173cf8472d44e7df161"), "questionType" : 0, "question" : "question1", "answers" : [ { "content" : "answer1" }, { "is_true" : "true", ...

javascriptjsonangularjsnode.jsmongodb

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure: <ul id="fruits"> <li><a href="#">Mango</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Grape</a>& ...

javascriptjqueryhtml

Transfer information via query or retrieve from storage in Vue

When considering sending a data variable to another component, is it more efficient to send it via query using a router or save the data in-store? Which method would be more optimal? router.replace({ name: 'routerName', query: { param ...

javascriptvue.jsvuejs2vue-componentvuex

Is there a way to position an image to the left of the container in Jinja templating while floating it?

I am currently working on a project using Flask that utilizes Jinja templates. In my layout.html file, there is a grey colored container that extends to all child pages. I have a specific page that extends the layout.html where I want to place an image flo ...

htmlcssflaskjinja2

Using the `on` method of jQuery to make an Ajax request

I'm facing a challenge with using Jquery to load dynamic wall posts for followers. The issue arises when trying to work with dynamic content in the traditional click method. To solve this, I have implemented the on method for the response. However, I ...

javascriptphpjqueryajax

Unexpected token . encountered in Javascript: Uncaught Syntax Error. This error message is triggered when

As someone who is completely new to programming, I was given the task of creating a voting website for a class assignment. In order to store data locally, I managed to create variables and implement them using local storage: var eventName = document.getEl ...

javascripthtml

Modifying the CSS design of specific columns within a table created using JavaScript

A unique way to showcase JSON data in a table is by utilizing a for loop within a function. This method, however, does not assign an ID or Class to the table. To hide the final three columns of this table using CSS, the following code can be employed (whe ...

javascriptcss

Delete outdated information using Google Apps Scripts when the date is less than the current date plus a specified number of days

I have a Google Sheet where I need to filter out entries based on the number of days since the last check. Specifically, I want to keep only those entries where the number of days since the last check is greater than 10. You can find the Sheet here. fu ...

javascriptgoogle-apps-script

Retrieve the $ionicConfigProvider within a Controller

In my controller file named ProfileController.js, I am trying to change the text of the back button. After doing some research, I found this code snippet: $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left'); How can ...

javascriptangularjsionic-framework

What is the best way to enable object references in Node modules?

I've been working on my Express.js web app and I've realized that as I extract parts of my code from the main app.js file into separate modules, I sometimes need to access objects from the main file. I'm trying to figure out the best way to ...

javascriptnode.jsexpressreferencemodule

Replacing npm package dependency

I came across this post: How can I change nested NPM dependency versions? Unfortunately, the solution provided did not work for me. I am attempting to modify a package to utilize a different version of a specific dependency instead of the one it currentl ...

javascriptnpmwebpackpackage.json

What is the best way to implement CSS styling in the existing Vue.js template?

Currently delving into the world of Vue.js, I've discovered that styling child components is achieved by referencing classes, ids, and tags defined in the component's template. Let's take a look at the App.vue component as an example: <st ...

htmlcssvue.jscomponents

Backing up a mongodb collection can be easily achieved with the help of express.js and Node.js

I am looking to create a monthly backup of my userdatas collection. The backup process involves: I intend to transfer the data from the userdatas collection to a designated backupuserdatas collection. A batch program should be scheduled to run automatica ...

javascriptnode.jsmongodbexpress

Converting city/country combinations to timezones using Node.js: A comprehensive guide

When provided with the name of a city and country, what is the most reliable method for determining its timezone? ...

javascriptnode.jsnpm

Tips for Implementing {{ }} within Angular Filters in Nested ng-repeat statements

I am looking to incorporate {{ }} within the Angular "filter" filter, specifically while nested inside an ng-repeat. Let's consider the relationship below: var categories = [ {"title":"land"}, {"title":"sea"}, {"title":"air"} ]; var vehi ...

javascriptangularjsfilternestedangularjs-ng-repeat