CSS Stylesheets loaded only once with multiple layout call in mojolicious

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

  •  30-06-2022
  •  | 
  •  

Question

I have a problem with a short mojolicious webbapp i'm developing for fun.

I have a layout ( templates/layouts/default.html.ep ) which is successfully used in both templates (templates/form.html.ep and templates/pasted.html.ep ) as the text i wrote just before the <%= content %> is outputted to the web page, but the stylesheets are only loaded for the first call (templates/form.html.ep ).

here is the "successful" call:

% layout 'default';
%=t h1 => 'LolPaste'
  <div id="form" />
    %=t h1 => 'Let the magic happen'
    %= form_for '/process' => (method => 'post') => begin
      %= label_for Title => 'Title:'
      %= text_field 'Title'
      <br/>
      %= label_for Text => 'Text:'
      %= text_area 'Text', rows => 10, id =>'flex'
      <br/>
      %= submit_button 'click', id => 'button'
    %= end
  </div>

here is the "failled" call:

% layout 'default';
%=t h1 => 'LolPaste'
<p>Here is your paste !</p>
<div id="pasted">
  %= $poil
  <br/>
</div>

and finally here is the layout:

<!doctype html>
<html>
  <head>
    <title>LolPaste</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
  </head>
  <body>
    test 
    <%= content %>
  </body>
</html>

The word "test" is outputted to the webpage on both call but the stylesheet fails to load on pasted.html.ep

ps: style.css is in the public directory.

Edit: I forgot to ask the question, which is : What am i doing wrong ? I have the feeling that this is a newbie error, but nothing on the documentation seems to answer my question.

Was it helpful?

Solution

if you can fetch the css file with an absolute path like this:

http://localhost:3000/style.css

your page have to fetch it like this:

<head>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>

NOT this:

<head>
    <̶l̶i̶n̶k̶ ̶r̶e̶l̶=̶"̶s̶t̶y̶l̶e̶s̶h̶e̶e̶t̶"̶ ̶t̶y̶p̶e̶=̶"̶t̶e̶x̶t̶/̶c̶s̶s̶"̶ ̶h̶r̶e̶f̶=̶"̶l̶o̶c̶a̶l̶h̶o̶s̶t̶:̶3̶0̶0̶0̶/̶s̶t̶y̶l̶e̶.̶c̶s̶s̶"̶>̶<̶/̶b̶>̶
</head>

is see you changed the order of the rel/type definition.. i dont think so.. but maybe thats the point..

furthermore the statement

<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>

which contains that

@font-face {
    font-family: 'Autour One';
    font-style: normal;
    font-weight: 400;
    src: local('Autour One'), local('AutourOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/autourone/v1/7LzkKwczNE2R2ZQSt90y1RsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

includes a woff file. it works, if you comment this line?

if you say it wont work anyway.. mh.. which browser you use ? IE8 ?

please vote if i could help you..

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top