Integrating extra stylesheets and scripts into a Grails layout dynamically from either a view or controller

Looking to implement a Grails layout to establish a unified design for all pages within the application. The current structure resembles the code below:

<!DOCTYPE html>
<html lang="dk">
<head>
    <meta charset="UTF-8">
    <title><g:layoutTitle default="Title"/></title>
    <asset:stylesheet src="css/default.css"/>
</head>
<body>
    <header><h1><g:layoutTitle default="Title"/></h1></header>
    <main></main>
    <footer></footer>
</body>
<asset:javascript src="jquery-3.4.1.min.js"/>
</html>

Some specific views may necessitate additional stylesheets or scripts beyond those provided in the layout, but when added directly to the view, they do not render as intended:

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang=\"dk\">
    <head>
        <meta name="layout" content="index" />
        <asset:stylesheet src="css/additional.css"/>
    </head>
    <body>
        <main>${content}</main>
    </body>
    <asset:javascript src="js/extra.js"/>
</html>

Is there a straightforward and efficient method to achieve this without any complications?

Answer №1

Take a look at:

Here is an example of a decorated page:

<html>
   <head>
        <meta name="layout" content="myLayout" />
        <script src="myscript.js" />
   </head>
   <body>Page that will be decorated</body>
</html>

Example decorator layout:

<html>
   <head>
        <script src="global.js" />
        <g:layoutHead />
   </head>
   <body><g:layoutBody /></body>
</html>

This results in:

<html>
   <head>
        <script src="global.js" />
        <script src="myscript.js" />
   </head>
   <body>Page that will be decorated</body>
</html>

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

Overlap of Navigation and Logo Divs on Mobile Website

Trying to optimize my website for mobile at coveartschildcare.com, but the header divs keep overlapping and nothing I do seems to fix it. Here's the CSS code I'm currently using: @media only screen and (min-device-width: 320px) and (max-devi ...

Swap the image source with a different image attribute when making the website responsive

I have implemented a custom attribute for the img tag in my code, such as data-tablet and data-mobil <div class="myDiv"> <img src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg"> </div> My goal is to have the image source c ...

Having trouble with the width of the Material-UI drawer feature

Encountering an issue with the material-ui drawer. I adjusted the width of the drawer container, which led to a problem where the drawer remains slightly inside the page and visible without clicking the button. It seems to be related to the transform attri ...

How to properly position HTML elements and center text within paragraphs with inputs

Hello friends! I've been scouring Google and YouTube for a solution to my issue but no luck so far. This is the first time I've encountered this problem. I want to align everything in the center, which it is, but there seems to be a vertical ali ...

Learn the process of seamlessly incorporating a spinner page into the rest of your HTML content

I'm currently working on a project involving a spinner page, but I'm facing some challenges when it comes to integrating the spinner with URL redirections. The project is centered around a multiplication program where if the answer is correct, us ...

Animate the width of a div element with CSS from the center

I'm working on a cool menu animation as a little experiment. Here's what I've got so far: HTML <div class="menu"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> < ...

Unusual occurrences when using absolute positioning, style.top, style.left, and the HTML "a" tag

Struggling to complete a task on Javascript.info involving an "a" tag. The objective is simple - place (and remove) a tooltip above the element upon hover. No issues with positioning over the roof or house, but as soon as I try to place the box a ...

Modifying the built-in Django messages tag

In the default settings, messages.success will output class='success'. I have been struggling to find a way to modify or append this to fit my requirements. Here is an attempt using extra_tags... views.py messages.success(request, '<a h ...

Encountering issues with PHP form not submitting correctly

After not finding any results in the original query, a form is generated using PHP. The form displays correctly, but upon submission it redirects to index.php instead of processing using $_SERVER['PHP_SELF']. echo "<form method=' ...

Tips for Utilizing PHP Without the Need to Refresh the Page

Below are the contents of three files with their respective code: Controler.php <iframe id="frame1" style="display:none"></iframe> <iframe id="frame2" style="display:none"></iframe> <button onClick="document.getElementById(&apo ...

Material-UI: The Mystery of Missing CSS Properties

Struggling to apply a CSS class to an element from Material-UI: bw:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } Tried using makeStyles: import { makeStyles } from '@material-ui/core/styles' ...

Utilizing Bootstrap framework to create a user-friendly navigation bar with dropdown functionality for a seamlessly organized and visually appealing full

Looking to utilize bootstrap for creating a top navigation layout and encountering an issue with the default left alignment. How can I make it span the full width at the top? Current https://jsfiddle.net/v2notb5n/ <nav class="navbar"> < ...

Adjusting the vertical dimension of an Angular 17 Material Dropdown Field?

Check out this demo where I'm exploring ways to decrease the height of the select field. Here's the code snippet: <mat-form-field appearance="outline"> <mat-label>Toppings</mat-label> <mat-select [formControl]=& ...

Struggling to apply CSS to a SVG for color filling, but facing technical difficulties

I've been attempting to use CSS to fill a twitter icon SVG with its color. Although I've successfully done this in the past, for some unknown reason, it has stopped working now. Below is the CSS code I'm using: .svg path { fill: #55acee; } ...

Why is the size of my array shrinking with every iteration of the for-loop in JavaScript?

I am struggling to change the classname of three elements that share the same classname. Unfortunately, as I loop through my array, it seems to decrease in size with each iteration, preventing me from successfully changing all three elements. Any advice or ...

Discover the correct value for the input field

I am currently experiencing an issue with inserting data into a database. <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="Repeater1_ItemDataBound"> <ItemTemplate> <!-- Some other data ( ...

Bootstrap 4 offers a convenient centered modal loading spinner feature

I'm trying to create a modal load spinner using Bootstrap 4's modal dialog box. However, I'm having trouble getting the modal to be horizontally centered on the page. Additionally, I would like the modal to have no borders and appear transpa ...

CSS ratings bar styling

Looking to create a unique ratings bar for my website, I have some questions that need answering. Take a look at the codepen link to see what I've come up with so far. My main query is about incorporating two different colors for Likes (green) and Di ...

Analyzing the browser's address bar and creating a navigation link derived from it

Is there a way to create a script that can extract information from the address bar? For example, if we have a link like this: We want to be able to take the "page-2011" part and dynamically generate navigation links like this: « <a href="/page-2010 ...

Position the navbar as an overlay when expanding, instead of pushing down the page contents

Is there a way in bootstrap 4.0 to have the navbar overlaying the contents of a page when it expands from the collapsed state, instead of pushing the contents down? I've experimented with setting z-index properties on the navbar and other classes, as ...