Twig template with symfony overriding block issues - symfony

I got a problem is overriding template. Here is my simple code
In commonHeader.html.twig
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
In file commonPage.html.twig I do like this:
{% block header %}
{{ include('::commonHeader.html.twig') }}
{% endblock %}
{% block content %}{% endblock %}
And I have many layouts that extended from commonPage.html.twig.
And on each layout, search have difference action url, so I need to override it.
Ex. in myLayout.html.twig I want to like this
{% extends "::commonPage.html.twig" %}
<!-- start overriding search here -->
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="mynewactionurl" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
{% block navigationleft %}
{% endblock %}
The problem is that I can't override search block in myLayout.html.twig?
Thanks for your helping!

Then you just need to fix the layout accordingly, i think its because you need to define your blocks in the main twig , i am not sure how the twig engine renders the includes but define your block in the main twig then include what you need, do not include blocks and then trying to override them. thats how our base.html.twig is defined. all our blocks are inside then we override them.

Related

How to inline radio buttons in a django form?

Here's the radio buttons:
account_type = forms.ChoiceField(
choices=enumerate(('Choice 1', 'Choice 2')),
widget=forms.RadioSelect(
{'class': 'form-check form-check-inline', 'style': 'margin-left: 20px'}
),
label='',
)
I'm using bootstrap-nightshade for styling which possibly contains something that prevents inlining the buttons. So far I tried:
display: inline
and
display: inline-block;
and
class="radio-inline"
Nothing works. Here's the template of the form
{% extends 'index.html' %}
{% load bootstrap5 %}
{% block content %}
<section class="h-100">
<div class="container h-100">
<div class="row justify-content-sm-center h-100">
<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
<div class="card shadow-lg">
<div class="card-body p-5">
<h4>{{ form_title }}</h4>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button class="btn btn-success">{{ form_title }}</button>
{% if form_title == 'Sign in' %}
<a style="margin-left: 15px" href={% url 'reset-password' %}>Forgot password?</a>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
and here's how they are rendered:
<div class="mb-3">
<div class="form-check form-check-inline" id="id_choices">
<div>
<label for="id_choices_0"><input class="form-check form-check-inline" id="id_choices_0"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="0">
Choice 1</label>
</div>
<div>
<label for="id_choices_1"><input class="form-check form-check-inline" id="id_choices_1"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="1">
Choice 2</label>
</div>
</div>
</div>

Django/CSS Icon and form input in same column

I am having a problem putting icon from font awesome and form input in the same column.
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
<div class="row pt-3">
<i class="fa fa-user fa-lg">{{ form.username }}</i>
</div>
</form>
</div>
With the code above, it looks a screenshot bellow:
I would like to look like the image bellow:
Thank you for your help.
It's better to deal with boxes with flexbox rather than row for more alignment flexibility.
Try the following code
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
<div class="d-flex pt-3">
<i class="fa fa-user fa-lg mr-2 "></i>{{ form.username }}
</div>
</form>
</div>

Where is MopaBootstrap defined in symfony?

I use MopaBootstrap in the twig and other places, but I want to know where it is defined.
{% extends "#MopaBootstrap/layout.html.twig" %}
{% from '#MopaBootstrap/flash.html.twig' import session_flash %}
{% block headline %}Choice Widgets{% endblock headline %}
{% block content %}
<div class="col-lg-6">
<form action="#" class="form-horizontal" method="post" >
{{ form_widget(form) }}
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</div>
<div class="col-lg-6">
<h3>Choice form widgets</h3>
<p>Here we try to show all possible choice form widgets</p>
<hr>
<p>And there is a lot to do</p>
</div>
{% endblock content %}

Symfony Demo Application - where to find twigs?

I'm trying to orientate myself with Symfony framework by going through the "Symfony Demo application" and am trying to work my way through the interconnections. However in the below code snippet I can't find where this twig reference is getting defined value="{{ last_username }}":
\app\Resources\view\security\login.html.twig
{% extends 'base.html.twig' %}
{% block body_id 'login' %}
{% block main %}
{% if error %}
<div class="alert alert-danger">
{{ error.messageKey|trans(error.messageData) }}
</div>
{% endif %}
<div class="row">
<div class="col-sm-5">
<div class="well">
<form action="{{ path('security_login_check') }}" method="post">
<fieldset>
<legend><i class="fa fa-lock"></i> Secure Sign in</legend>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="_password" class="form-control" />
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-sign-in"></i> Sign in
</button>
</fieldset>
</form>
</div>
</div>
I have searched the whole demo application for last_username and it only appears in these four files:
\app\cache\dev\classes.php
\app\cache\prod\classes.php
\vendor\symfony\symfony\src\Symfony\Component\Security\Core\SecurityContextInterface.php
\vendor\symfony\symfony\src\Symfony\Component\Security\Core\Security.php
...all of which don't seem to offer anything helpful of defining last_username.
The last_username parameter is passed to the template via the SecurityController, which is defined in the src/AppBundle/Controller/SecurityController.php file.
One of the coolest features of the Symfony Demo application is that all pages include a Show code which shows you both the controller and the template used to create the page you are looking at. For example, in the case of the login page:

bootstrap 3 navbar alignment issues with login?

I am having couple of problems with implementing login form in bootstrap 3 in navbar.
I have attached the image below:
I want "Remember me" and "Forgot password" to align with input boxes for username and password right below it. but they are not well-aligned.
The color on "forgot password" is blue which I want it to be white (or red).
The font of the "Remember me" and "forgot password" are inconsistent with placeholders I placed in form.
how can I fix these issues?
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form" action="" method="post">
{% csrf_token %}
<div class="form-group {% if login_failed %} has-error {% endif %}">
{{ form.username.label_tag }}
<input type="text" placeholder="Uname or Email" class="form-control input-sm" {% if login_failed %}
id = "inputError" {% endif %} name="username">
</div>
<div class="form-group {% if login_failed %} has-error {% endif %}">
<input type="password" placeholder="Password" class="form-control input-sm" name="password"
{% if login_failed %} id = "inputError" {% endif %}>
</div>
<button type="submit" class="btn btn-success">Sign in</button><br>
<div class="form-group">
<div class="col-xs-12">
<label><input type="checkbox" value="remember-me">Remember me</label>
<label><a class="help-inline" href="{% url 'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
</div>
</div>
Replace the class "navbar-form" by "form-inline" in tag .
Like said, apply a class directly to the tag "Forgot password", or more generally :
.navbar-collapse a{color:red}
http://jsfiddle.net/u2pNA/
I'm not familar with django, but i'll try to see if I can help with your bootstrap issues.
To seperate the remember me and the forgot password you can do something like this. Seperating into two columns( 2x col-xs-6) instead of using one(col-xs-12)
<div class="form-group">
<div class="col-xs-6">
<label><input type="checkbox" value="remember-me">Remember me</label</div><div class="col-xs-6"><label><a class="help-inline" href="{% url'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
</div>
To change the color of the Forgot password to white, you would need to set a class on that link.
so perhaps something like
.navbar .form-group a{color:#FFF}
Hope that helps a bit. Good luck.

Resources