0

How to calculate the body in Symfony 5 with inheritable templates I have a 76 px high navbar and a 157 px high footer because I want to make a body that occupies the rest of the screen but is responsive at the same time, that is, if the resolution of your screen is larger than the body occupies more while maintaining the proportions of the navbar and footer

this is my base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
        {% if form is defined and form %}
                {% form_theme form 'bootstrap_5_layout.html.twig' %}
        {% endif %}

        {% block stylesheets %}
            <link href="/css/base.css" rel="stylesheet" type="text/css">
            <link href="/css/main.css" rel="stylesheet" type="text/css">
            <link href="/css/family.css" rel="stylesheet" type="text/css">
        {% endblock %}


        
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
        <!-- JavaScript Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

    </head>
    <body id="contenedor">
            {% block menu %}
                <nav class="navbar navbar-dark navbar-expand">
                    <div class="container-fluid">
                        <img id="icon" src="/svg/logoPlanesSinFondo.svg">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                            <div class="navbar-nav ms-auto">
                                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                                    <a class="nav-link" href="{{ path('app_logout') }}">
                                        Cerrar sesión
                                    </a>
                                {% else %}
                                    <a class="nav-link" href="{{ path('app_login') }}">Iniciar sesión</a>
                                    <a class="nav-link" href="{{ path('app_register') }}">Registrar</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </nav>
            {% endblock %}

            {% block body %}
            {% endblock %}

            {% block footer %}
            <footer class="text-center text-white">
                <!-- Grid container -->
                <div id="logosContainer" class="container pb-0">
                    <!-- Section: Social media -->
                    <section class="mb-4">
                        <!-- Facebook -->
                        <a class="btn text-white btn-floating m-1" style="background-color: #3b5998;" href="https://www.facebook.com/IesJosePlanes/" role="button">
                            <i class="bi bi-facebook"></i>
                        </a>

                        <!-- Twitter -->
                        <a class="btn text-white btn-floating m-1" style="background-color: #55acee;" href="https://twitter.com/iesjoseplanes" role="button">
                            <i class="bi bi-twitter"></i>
                        </a>

                        <!-- Google -->
                        <a class="btn text-white btn-floating m-1" style="background-color: #dd4b39;" href="#!" role="button">
                            <i class="bi bi-google"></i>
                        </a>

                        <!-- Instagram -->
                        <a class="btn text-white btn-floating m-1" style="background-color: #ac2bac;" href="https://www.instagram.com/infoplaness/" role="button">
                            <i class="bi bi-instagram"></i>
                        </a>
                    </section>
                    <!-- Section: Social media -->
                </div>
                <!-- Grid container -->
            </footer>
            {% endblock %}
    </body>
</html>

This is my base.css

/* BODY */

#contenedor{
    height: 100%; 
    width: 100%; 
}

/* NAVBAR */

.navbar{
    width: 100%;
    left: 0px;
    height: 10.29%;
    background-color: #37a8ec;
}

#icon{
    width: 40px;
    height: 60px;
    /* width:40px;height: 60px; */
}

/* RESERVAS */

.disabled{
    cursor: not-allowed;
    pointer-events: none;
}

/* FOOTER */

footer{
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 157px; 
    background-color: #666666;
}

#logosContainer{
    height: 157px;
}

and I want the body to be responsive according to the screen resolution, be it 1920x1080 or another and this is the template that inherits from the base.css which is called index.html.twig with main.css

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

{% block title %}Hello MainController!{% endblock %}

{% block body %}
    <div id="cardMainContainer">
        <div id="cardmain1" class="card" style="width: 18rem;">
            <a href="{{path('familia')}}">
                <img src="/img/reloj.jpg" class="card-img-top" alt="...">
            </a>
            <div class="card-body">
                <p class="card-text">Familia</p>
            </div>
        </div>

        <div id="cardmain2" class="card" style="width: 18rem;">
            <a href="{{path('plantilla')}}">
                <img src="/img/calendario.jpg" class="card-img-top" alt="...">
            </a>
            <div class="card-body">
                <p class="card-text">Plantilla</p>
            </div>
        </div>
    </div>
{% endblock %}

and this is the code of main.css

/* BODY MENÚ PRINCIPAL */
#cardMainContainer{
    display: flex;
}

pls help :(

How to calculate the body in Symfony 5 with inheritable templates I have a 76 px high navbar and a 157 px high footer because I want to make a body that occupies the rest of the screen but is responsive at the same time, that is, if the resolution of your screen is larger than the body occupies more while maintaining the proportions of the navbar and footer

  • I think it's a xy problem because instead of looking for `calc` to check the remaining space and have to change the calcul when you will modify your nav and footer, you should check how to fill a remaining space, something like that – Cédric Nov 24 '22 at 16:11
  • @Cédric that is to say that if the navigation bar measures for example 76 px in height and the footer 157 px the sum of both sizes is 233px and if I put this `height: calc(100%-233px);` should it calculate the remaining space? – Miguel Ángel Nov 24 '22 at 16:30
  • I wouldn't recommand this way but if you want, you can try, add spaces between "-" – Cédric Nov 24 '22 at 16:55
  • @Cédric what do you mean? – Miguel Ángel Nov 24 '22 at 17:13
  • How is this related to twig? – DarkBee Nov 24 '22 at 17:25
  • Do you mean? `{% extends 'base.html.twig' %}` – Miguel Ángel Nov 25 '22 at 10:09
  • 1
    Please post the generated HTML instead of the twig templates as your problem has nothing do with twig nor symfony – DarkBee Nov 25 '22 at 10:48

0 Answers0