-2

I have my homepage with a bootstrap theme.

When I go on : localhost/boardgamedb/public/index.php

everything looks fine.

However when I click on the "home" link I get redirected to : localhost/boardgamedb/public/index.php/ (as normal considering my controller)

I do get the same content but with no css (and I don't know yet for the JS)

my base.html.twig is :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="stylesheet" href="style/bootstrap.min.css">
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="{{ path('homepage') }}">Boardgame DB</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="{{ path('homepage') }}">Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            
            </ul>
            
        </div>
    </nav>
        {% block body %}{% endblock %}
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        {% block javascripts %}{% endblock %}
    </body>
</html>

my home.html.twig :

{% extends 'base.html.twig' %}

{% block body %}
    <h1>Test2</h1>
{% endblock %}

and my controller is :

class BgdbController extends AbstractController{

    /** 
    * @Route("/", name="homepage")
    */
    public function home() {
        return $this->render(
            "home.html.twig"
        );

    }
}

I cannot see why the css work on one but not on the other, probably a problem with the route to the css file.

Jerome
  • 1
  • 1
  • 2
  • use absolute path, like this: `/style/bootstrap.min.css` – Mohit Deshwal Nov 11 '20 at 12:17
  • With the added / at the end of the URL, the “folder depth” has now changed, and therefor resolving the relative URL to your stylesheet, results in a different absolute URL for that now - a wrong one. The easiest solution is to refer to your external assets using relative URLs starting with a / - those always refer to the domain root. – CBroe Nov 11 '20 at 12:18
  • tried it but in vain – Jerome Nov 11 '20 at 12:22
  • what's the location of asset? – Mohit Deshwal Nov 11 '20 at 12:24

2 Answers2

0

Ok finally I manage to solve this issue following the same idea that was suggested but differently.

EDIT : I had to use an absolute link with the entire adress :

/boardgamedb/public/style/bootstrap.min.css

anything else was not working.

Jerome
  • 1
  • 1
  • 2
0

Another practice would be to use the asset component which would generate the correct path everywhere in your project : First you have to check if it’s not already installed :

composer show -i

If you don’t have the line “symfony/asset” then you have to install the component :

composer require symfony/asset

If your file is here in your project : “public/style/bootstrap.min.css” then your code should be :

<link href=”{{ asset(‘style/bootstrap.min.css’) }}” rel=”stylesheet”/>

Symfony doc about asset is well explained : https://symfony.com/doc/current/templates.html

A better practice would be to use Webpack-Encore, but it’s a bit more complicated to set up.

Metaljk
  • 21
  • 5