How to inline radio buttons in a django form? - css

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>

Related

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>

Display data from ngFor loop in two columns in Angular

I want to display this form within two columns. The elements with index from 0 to 4 wrapped in a 'col-md-6' class and from index 5 to 8 in a new 'col-md-6'. Can I achieve that?
<form [formGroup]="openingHoursForm">
<div *ngFor="let dia of selectedCenter.dias; let i = index">
<div class="dayOpeningHours" itemprop="openingHours" title="">
<div>{{ i }}</div>
<div class="opens">
<label for="">De:
<input class="form-control" id="mondayFrom" type="time" formControlName="openingTime{{ dia.diasemana }}" name="openingTime{{ dia.diasemana }}" value="{{ dia.horainicio }}">
</label>
</div>
<div class="closes">
<label for="">A:
<input class="form-control" id="mondayTo" type="time" formControlName="closingTime{{ dia.diasemana }}" name="closingTime{{ dia.diasemana }}" value="{{ dia.horafinal }}">
</label>
</div>
</div>
</div>
</form>
Use the slice pipe With the SlicePipe https://angular.io/api/common/SlicePipe
<div class="col-md-6">
<div *ngFor="let dia of selectedCenter.dias | slice:0:5>
...
</div>
</div>
<div class="col-md-6">
<div *ngFor="let dia of selectedCenter.dias | slice:5:9>
...
</div>
</div>

My twig file which extends from the base is not getting styles

I have a base twig file and when it renders, it gets some styles I have in a public folder. But then I have another twig file which extends from the base that only changes the base's body block and is not getting the styles in the blocks they share (header and footer).
Thanks in advance if someone knows the answer.
My base (called maleteo.html.twig)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
{% block title %}Maleteo
{% endblock %}
</title>
{% block stylesheets %}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran:400,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/styles/styles.css">
<script src="https://kit.fontawesome.com/d5a5c93a6c.js" crossorigin="anonymous"></script>
{% endblock %}
</head>
{% block header %}
<body>
<div class="wrapper">
<div class="container-fluid">
<header class="header row">
<img src="assets/img/logo.svg" alt="Maleteo" class="col-md-3">
<p class="logged-user col-md-offset-7 col-md-2"><span class="fas fa-user"></span> {{ app.user.username | default }}
{% if app.user == null %} Login<span> / </span> Regístrate{% endif %}
{% if app.user %}Logout{% endif %}
</p>
</header>
</div>
</div>
{% endblock %}
{% block body %}
<main>
<div class="jumbo">
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="jumbo__ww-title">
<div class="jumbo__w-title">
<h1 class="jumbo__title heading1">
Gana dinero guardando equipaje a viajeros como tú
</h1>
<ul class="jumbo__app-btns">
<li>
<a href="#">
<img src="assets/img/app-store.svg" alt="" class="jumbo__app-btn">
</a>
</li>
<li>
<a href="">
<img src="assets/img/google-play.svg" alt="" class="jumbo__app-btn">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="container-fluid">
<section class="howworks">
<h2 class="howworks__title heading2">
¿Cómo funciona?
</h2>
<ol class="howworks__steps row">
<li class="col-md-4">
<div class="howworks__step">
<div class="howworks__step-w-bola">
<div class="howworks__step-bola">
<span class="heading3">1</span>
</div>
</div>
<div class="howworks__step-w-txt">
<p class="howworks__step-title heading3">
Regístrate:
</p>
<p class="howworks__step-txt">
Para obtener todas las ventajas puedes registrarte
aquí.
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="howworks__step">
<div class="howworks__step-w-bola">
<div class="howworks__step-bola">
<span class="heading3">2</span>
</div>
</div>
<div class="howworks__step-w-txt">
<p class="howworks__step-title heading3">
Solicita/consulta las demos:
</p>
<p class="howworks__step-txt">
Puedes solicitar una demo en nuestro formulario o ver las solicitudes
aquí.
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="howworks__step">
<div class="howworks__step-w-bola">
<div class="howworks__step-bola">
<span class="heading3">3</span>
</div>
</div>
<div class="howworks__step-w-txt">
<p class="howworks__step-title heading3">
Disfruta:
</p>
<p class="howworks__step-txt">
Empieza a disfrutar de todas las ventajas que ofrece maleteo.
</p>
</div>
</div>
</li>
</ol>
</section>
<section class="app-form">
<div class="row">
<div class="col-md-5">
<div class="app-form__w-app-img">
<img src="assets/img/iPhoneX.png" srcset="assets/img/iPhoneX#2x.png 2x, assets/img/iPhoneX.png 1x" alt="" class="app-form__app-img">
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="the-form">
<form
action="{{ path('newDemo') }}" method="POST">
<p class="the-form__title heading3">
Solicita una demo
</p>
<div class="the-form__group">
<label for="nombre">
Nombre
</label>
<input type="text" id="inputName" class="the-form__input" placeholder="por ej. Vincent Chase" name="nombre">
</div>
<div class="the-form__group">
<label for="email">
Email
</label>
<input type="email" id="inputEmail" class="the-form__input" placeholder="por ej. vincent#mga.com" name="email">
</div>
<div class="the-form__group">
<label for="ciudad">
Ciudad
</label>
<select id="inputCity" class="the-form__input the-form__select" name="ciudad">
<option value=''>Selecciona una Ciudad</option>
<option value=''>----------------</option>
<option value='Alava'>Álava</option>
<option value='Albacete'>Albacete</option>
<option value='Alicante'>Alicante</option>
<option value='Almeria'>Almería</option>
<option value='Asturias'>Asturias</option>
<option value='Avila'>Ávila</option>
<option value='Badajoz'>Badajoz</option>
<option value='Barcelona'>Barcelona</option>
<option value='Burgos'>Burgos</option>
<option value='Caceres'>Cáceres</option>
<option value='Cadiz'>Cádiz</option>
<option value='Cantabria'>Cantabria</option>
<option value='Castellon'>Castellón</option>
<option value='Ceuta'>Ceuta</option>
<option value='Ciudad Real'>Ciudad Real</option>
<option value='Cordoba'>Córdoba</option>
<option value='Cuenca'>Cuenca</option>
<option value='Girona'>Girona</option>
<option value='Las Palmas'>Las Palmas</option>
<option value='Granada'>Granada</option>
<option value='Guadalajara'>Guadalajara</option>
<option value='Guipuzcoa'>Guipúzcoa</option>
<option value='Huelva'>Huelva</option>
<option value='Huesca'>Huesca</option>
<option value='Illes Balears'>Illes Balears</option>
<option value='Jaen'>Jaén</option>
<option value='A Coruña'>A Coruña</option>
<option value='La Rioja'>La Rioja</option>
<option value='Leon'>León</option>
<option value='Lleida'>Lleida</option>
<option value='Lugo'>Lugo</option>
<option value='Madrid'>Madrid</option>
<option value='Malaga'>Málaga</option>
<option value='Melilla'>Melilla</option>
<option value='Murcia'>Murcia</option>
<option value='Navarra'>Navarra</option>
<option value='Ourense'>Ourense</option>
<option value='Palencia'>Palencia</option>
<option value='Pontevedra'>Pontevedra</option>
<option value='Salamanca'>Salamanca</option>
<option value='Segovia'>Segovia</option>
<option value='Sevilla'>Sevilla</option>
<option value='Soria'>Soria</option>
<option value='Tarragona'>Tarragona</option>
<option value='Tenerife'>Santa Cruz de Tenerife</option>
<option value='Teruel'>Teruel</option>
<option value='Toledo'>Toledo</option>
<option value='Valencia'>Valencia</option>
<option value='Valladolid'>Valladolid</option>
<option value='Vizcaya'>Vizcaya</option>
<option value='Zamora'>Zamora</option>
<option value='Zaragoza'>Zaragoza</option>
</select>
</div>
<div class="the-form__group the-form__group_checkbox">
<input type="checkbox" id="privacity">
<label for="privacity">
Acepto la
política de privacidad
</label>
</div>
<input type="submit" class="the-form__btn btn btn-lg btn-primary" value="Enviar">
</form>
</div>
</div>
</div>
</section>
<section class="opinions">
<h2 class="opinions__title heading2">
Opiniones de otros guardianes
</h2>
<p>Escriba su opinión
aquí
</p>
<ul class="row">
{% for opin in opiniones %}
{% if opin.id < 4 %}
<li class="col-md-4">
<div class="opinion">
<blockquote class="opinion__blq simple-bubble text-large">{{ opin.comentario }}</blockquote>
<p class="opinion__author text-large">{{ opin.autor }}</p>
<p class="opinion__author-address">{{ opin.ciudad }}</p>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</section>
</div>
</div>
</main>
{% endblock %}
{% block javascripts %}{% endblock %}
{% block footer %}
<footer class="footer">
<div class="wrapper">
<div class="container-fluid">
<img src="assets/img/logo.svg" alt="Maleteo" class="footer__logo">
<p class="footer__claim">
Hecho con ❤️ en Málaga.
</p>
</div>
</div>
</footer>
{% endblock %}
</body>
</html>
Then my file which extends from maleteo:
{% extends 'maleteo.html.twig' %}
{% block title %}Login
{% endblock %}
{% block body %}
<main>
<div class="jumbo">
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<form method="post">
{% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
{% if app.user %}
<div class="mb-3">
Has ingresado como:
{{ app.user.username }},
Logout
</div>
{% endif %}
<h1 class="h3 mb-3 font-weight-normal">Por favor, ingrese con su cuenta:</h1>
<label for="inputUsername">Username</label>
<input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" required autofocus>
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
<input
type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
{#
Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
See https://symfony.com/doc/current/security/remember_me.html
<div class="checkbox mb-3">
<label>
<input type="checkbox" name="_remember_me"> Remember me
</label>
</div>
#}
<button class="btn btn-lg btn-primary" type="submit" onclick {{ path('maleteo-home') }} ]>
Sign in
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}
Try to remove
{% block stylesheets %}{% endblock %}
definition from the base template (keeping styles), or to use
{% block stylesheets %} {{ parent() }} {% endblock %}
in child template between title and body blocks
you need to use asset command in twig to load your local css
<link rel="stylesheet" href="{{asset('assets/styles/styles.css') }}">

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 %}

Twig template with symfony overriding block issues

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.

Resources