I've been trying to show items on the same line in bootstrap here is my code, it's was working before , but i think i messed it up , i'm kinda new to bootstrap, any help would be much appreciated.
<div class="row">
{% for album in all_albums %}
<div class="col-sm-4 col-lg-2">
<div class="thumbnail">
<a href="{% url 'music:detail' album.id %}">
<img src="{{ album.album_logo.url }}" class="img-responsive">
</a>
<div class="caption">
<h2>{{ album.album_title}}</h2>
<h4>{{ album.artist}}</h4>
<!-- Details -->
Details
<!-- Delete -->
<form action="{% url 'music:album-delete' album.id %}" method="post" style="display: inline;">
{% csrf_token %}
<input type="hidden" name="album_id" value="{{ album.id}} "/>
<button type="submit" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
</form>
<!--Favorite-->
<a href="#" class="btn btn-default btn-sm btn-favorite">
<span class="glyphicon glyphicon-star">{% if album.is_favorite%}active{% endif %}</span>
</a>
</div>
</div>
</div>
</div>
</div>
Related
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>
the login works perfectly fine with the simple form
but when I try to add bootstrap/css/js to it , its doesn't work anymore the
{% if error %}
<span class="error">{{ error.messageKey }} </span>
{% endif %}
shows ( Invalid credentials. ) error!
I just cant find where is the error
Here is the code of the simple form :
<form action=" {{ path ('login') }} " method="POST">
<input type="text" name="_username" value"{{ last_username }}" placeholder="username here.">
<input type="password" name="_password" >
<button type="submit"> login </button>
</form>
here is the code of the form (with css/bootstrap/js)
<form action=" {{ path ('login') }} " method="POST" class="login100-form validate-form">
<div class="login100-form-avatar">
<img src="{{ asset('/logo.jpg') }}" alt="AVATAR">
</div>
<span class="login100-form-title p-t-20 p-b-45">
Bazar-Chic Login page
</span>
<div class="wrap-input100 validate-input m-b-10" data-validate = "Username is required">
<input class="input100" value="{{ last_username }}" type="text" name="_username" placeholder="Username">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate = "Password is required">
<input class="input100" type="password" name="pass" placeholder="Password">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
</div>
<div class="container-login100-form-btn p-t-10">
<button class="login100-form-btn">
Login
</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
<a href="#" class="txt1">
Forgot Username / Password?
</a>
</div>
<div class="text-center w-full">
<a class="txt1" href="http://127.0.0.1:8000/register">
Create an account
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</form>
As Barbie said the problem was with the name of the input.
(name="pass" => name="_password")
The problem is solved and the topic can be locked!
Thank you ;)
Maybe you should change:
name="pass" to name="_password"
I'm trying to create a view where I show the bootstrap thumbnails on the same line, I've tried different methods and I'm showing thumbnails type list.
Here is my method in the controller:
public function show($id)
{
$properties = Property::find($id);
$files = File::where('property_id', $properties->id)->get();
return view('properties.show', compact('properties', 'files'));
}
This is my method in the view:
#foreach($properties->files as $index=>$file)
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
</div>
#endforeach
This way they are showing the images as thumbnails:
This should be the right way:
Can someone guide me to correct this small inconvenience?
You should loop inside your .row. The foreach method just repeats every code inside of it. So it was repeating <div class="row">...</div> every single time.
<div class="row">
#foreach($property->files as $index => $file)
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>
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.
My problem is that I cannot display my glyphicon before my inputs.
Here is my code:
<div class="modal fade " id="login" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title">Log in</h4>
</div>{{--close modal header --}}
<div class="modal-body text-center">
{{ Form::open(array('url'=>'/' ,'role'=>'form')) }}
#if($errors->count()>0)
<div class="alert alert-danger" style="text-align:center;">
<p>Errors</p>
<ul>
#foreach($errors->all() as $error)
<li>
{{$error}}
</li>
#endforeach
</ul>
</div>
#endif
#if(Session::has('flash_message'))
<div class="alert alert-danger" style="text-align:center;">
<p>{{Session::get('flash_message')}}</p>
</div>
#endif
<div class="form-group">
<span class="glyphicon glyphicon-user ">
{{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }}
</span>
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock ">
{{ Form::password('password', ['required'=>'1','placeholder'=>'Password','id'=>'password','class'=>'form-control']) }}
</span>
</div>
<br/>
{{'
'}}
{{ Form::submit('login',['class'=>'btn']) }}
or
{{ Form::button('Sign up',['class'=>'btn btn-danger','data-dismiss'=>'modal','data-toggle'=>'modal','data-target'=>'#signup'])
}}
{{ Form::close() }}
</div>{{--close modal body --}}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div> {{--close modal --}}
Where rows such as {{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }}
are Laravel 4 commands which generate input type="text" name="text" class="form-control pleceholder= ...
Please answer only for bootstrap 3..
You could use .form-horizontal, and put your glyphicon in an other column than the field :
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-user"></span></label>
<div class="col-sm-5">
<input type="text" placeholder="Username" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-lock"></span></label>
<div class="col-sm-5">
<input type="password" placeholder="Username" class="form-control"/>
</div>
</div>
<br/>
<input type="submit" class="btn btn-default" value="Login"/>
or
<input type="submit" class="btn btn-danger" value="Sign up"/>
</form>
Play with col-sm-x and col-sm-offset-x to get the width you need.
Bootply