<g:layoutBody /> does not render the styling applied to <body> tag

StackOverflow https://stackoverflow.com/questions/22854075

Pergunta

I've created a simple layout using grails default layout pattern.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title><g:layoutTitle default="my website" /></title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />

        <g:layoutHead />
            <r:layoutResources />

    </head>
    <body id="mainContainer">

        <g:render template="/templates/headerTemplate"></g:render>
        <g:render template="/templates/menuTemplate"></g:render>
        <g:layoutBody />
        <r:layoutResources />

    </body>
</html>

Now so far as I understand the <g:layoutBody /> renders the body content. (Please correct me if I'm mistaken). Now I've applied custom styling to the <body> tag of each pages. But that styling is not being applied to my rendered view. Eg. I've an image which I want to apply to the body. But that is not being applied. When I insert a div inside the body and apply the same image to it, its getting applied to it.

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="mainLayout"/>
    <title>Match List</title>
    <script type="text/javascript" src="${resource(dir:'js',file:'matchDetailsJS.js')}"></script>
</head>
<body class="myclass">    </body>
</html>

My css file is getting included as my styling is being applied to other elements.

What am I missing? Is something wrong with my g:layout? I tried finding in the documentation but so far did'nt find anything much. Let me know if my question is not clear. Thanking you!!

Foi útil?

Solução

I suspect this is because the layout needs to understand you have properties that you wish to supply for the body tag. The Grails documentation has a good example about using page property to specify an onload attribute of the body tag.

Here is the example modified for your needs.

layout

    <title><g:layoutTitle default="my website" /></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />

    <g:layoutHead />
        <r:layoutResources />

</head>
<body id="mainContainer" class="${pageProperty(name:'body.class')">

    <g:render template="/templates/headerTemplate"></g:render>
    <g:render template="/templates/menuTemplate"></g:render>
    <g:layoutBody />
    <r:layoutResources />

</body>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top