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

When running a callback function, the "this" of an Angular 2 component becomes undefined

One issue I'm facing is with a component that fetches data from a RESTful endpoint using a service, which requires a callback function to be executed after fetching the data. The problem arises when attempting to use the callback function to append t ...

javascriptarraystypescriptangular

Combining a Python backend with an HTML/CSS/JS user interface for desktop applications: the perfect synergy?

Is it possible to seamlessly combine Python code with HTML/CSS/JS to develop desktop applications? For instance, I want to create a function in Python that displays "Hello World!" and design a visually appealing user interface using HTML/CSS/JS. How can I ...

javascriptpythonhtmlcssuser-interface

Is your CSS failing to display images properly?

I recently launched my website, www.alphenweer.nl, and everything seems to be working fine except for the images in the template. Despite being on the correct URL, the images fail to load when the website is accessed. You can test it out here. Can someone ...

cssimage

Adding a class to an img tag with TinyMCE

Currently, I am utilizing the TinyMCE editor as a standalone editor in my content management system (CMS). Within the CMS, there is an automatic setting that adds a curved border to any image tags within the cms div ID. In certain cases, I require the op ...

phpjavascriptcsstinymcewysiwyg

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

As a beginner in HTML website design, I have recently started using HTML, CSS, jQuery, and JavaScript for designing websites. After creating a site with almost forty webpages, the client requirements are changing, requiring changes to be made across all ...

javascriptjqueryhtmlcss

AngularJS and Select2's Multiple - Tags feature can display tags intermittently, showing some and hiding others as needed

Currently, I am implementing AngularJS along with select2 (not using ui-select). In my view, the following code is present: <select name="rubros" id="rubros" class="select2 form-control" ng-model="vm.comercio.tags" ng-options="rubro.nombre for rub ...

javascriptangularjstagsjquery-select2jquery-select2-4

After the state loads in Ui-router, how can I execute a function?

Transitioning from jQuery to Angular, I am struggling with ui-router and states. In jQuery, I can make an AJAX call and then run another function on success. How can this be achieved in Angular? For instance, consider the code snippet below: var ivApp = ...

javascriptjqueryajaxangularjsangular-ui-router

After applying the cellClass in ng-grid, the row border mysteriously disappears

After applying cellClass to color an entire column, the row border disappears. Here is a link to the Plunker demonstration: http://plnkr.co/edit/4IeQQBTIe8sgHVEBUTAp?p=preview. Does anyone have a solution for this issue? ...

javascriptcssangularjsrowng-grid

The plugin 'vue' specified in the 'package.json' file could not be loaded successfully

There seems to be an issue with loading the 'vue' plugin declared in 'package.json': The package subpath './lib/rules/array-bracket-spacing' is not defined by the "exports" in C:\Users\<my_username>\Folder ...

javascriptnode.jsjsonvue.jseslint

Avoid duplicate submissions while still enforcing mandatory fields

Let's start with a basic form that only asks for an email address: <form action="NextPage.php" method="post"> <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email"> <button type="submit">Subm ...

javascripthtml

Manipulating variables in the main controller scope from a function in a transcluded directive scope using AngularJS

How can parent controller scope variables be updated from a transcluded directive scope's function? I have a situation where I am including directives within another directive using transclusion. Here is an example of how it is set up: <my-table& ...

javascriptangularjstransclusionangularjs-ng-transclude

Organizing AngularJS ng-repeat into sets of n items

I am facing a challenge with a data set structured like this: $scope.items = [ { model:"A", price: 100, quantity: 30}, { model:"B", price: 90, quantity: 20 }, { model:"C", price: 80, quantity: 200 }, { model:"D", price: 70, quantity: 20 ...

javascriptangularjs

Retrieving entities from a text

I found a script on the Webdriver.io website that looks like this (adjusted for testing) const { remote } = require('webdriverio'); var assert = require('assert'); ;(async () => { const browser = await multiremote({ ...

javascriptregex

Bootstrap modal with autocomplete feature

How can I display the last entered data by the user in a bootstrap modal? I attempted to use the HTML autocomplete="on" attribute but it did not work, similar to what is shown in this fiddle. After the user submits, on the subsequent attempt, it should pr ...

javascriptjqueryangularjsjquery-uiautocomplete

The message "The property 'layout' is not found on the type 'FC<WrapperProps>' in Next.js" is displayed

I encountered an error in my _app.tsx file when attempting to implement multiple layouts. Although the functionality is working as expected, TypeScript is throwing an error Here is the code snippet: import Layout from '@/components/layouts&apo ...

javascriptreactjstypescriptnext.jscompiler-errors

A step-by-step guide to effectively stubbing a dependency within an express middleware using a combination of express-validator, mocha, chai, sinon,

**Edit: Re-created with a simple example that works first: I have an example file and two modules. moduleA has a dependency called moduleB // moduleA.js const ModuleB = require('./moduleB'); function functionA() { return 20 + ModuleB.functio ...

javascriptnode.jsexpressmocha.js

Experiencing a blank array when using filtering/search text in a Nodejs application with MongoDB

I am experimenting with search functionality in a MongoDB database using Node.js. However, my result array is always empty. I have shared my code here and would appreciate some assistance in identifying the issue. Whenever I perform a search, I end up with ...

javascriptnode.jsmongodb

Sharing context sub files in Next.js can be easily accomplished by following a few simple

These are the pages on my website: /pages /gift /[slug] index.tsx /personalize index.tsx In /gift/[slug]/index.tsx, I have a component called GiftProvider that looks like this: return ( <GiftProvider gift={gift}& ...

javascriptnext.js

Menu/navigation bar designed with floating lines and an array of color options

I'm currently working on implementing this specific menu into my Wordpress site. My main concern is figuring out how to customize the hover effect for each navigation item. Currently, the float line changes to red (background-color:#800; height:2px;) ...

javascriptjquerycssmenu

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

I am currently utilizing the DataTables library to generate a responsive table. I am aiming to create a feature where all columns in the DataTable can toggle between collapse and expand states when clicked, with the exception of the last column. Below is a ...

javascripthtmlcssdatatableresponsive