I have a a Bootstrap panel with two buttons in the footer:
<div class="panel-footer">
{{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
{{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
</div>
The forms for each of the buttons have the class pull-left and pull-right so that they are each floated to either side of the panel footer.
The float is working, but the buttons are now outside of the footer:
I tried using the grid system instead of the pull helpers but I ended up with the same result.
I've also searched around for the solution (this has to be pretty common I would think) and haven't found an explanation that doesn't require overriding Bootstrap with custom css.
Is it possible to fix this with just Bootstrap or would I need to throw my own css in to fix it?
Just add a div with clearfix after the buttons
<div class="clearfix"></div>
stalin's answer is correct, but you can use another approach that is more elegant
From Bootstrap Documentation (#clearfix)
Easily clear floats by adding .clearfix to the parent element.
Just add clearfix to the parent div:
<div class="panel-footer clearfix">
{{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Edit", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
{{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }}
{{ Form::submit("Delete", array('class' => 'btn btn-default')) }}
{{ Form::close() }}
</div>
just add the class text-right on the panel-footer div
I think its strange that .panel-footer isn't included in the clearfix css library already the way .panel-body and even .modal-footer are. Instead of having to remember to throw a clearfix class on ever footer (if you have a lot it can be a pain) its better to just add the clearfix css to .panel-footer in your master CSS or edit the library directly.
.panel-footer:before, .panel-footer:after {
display: table;
content: " ";
}
.panel-footer:after {
clear: both;
}
Related
(Sorry for my english, i'm trying to not use Google Translate ^^)
So.. I created a CPT UI "projets" which contain actually 2 posts (FMXD and Siemens) as you can see here :
I want that when i click on FMXD, i have a first page only displaying the post_thumbnail of FMXD. Like This :
As you can see, my page is displaying FMXD and Siemens and i don't understand why...
Actually, i have a single-projets.php :
<?php
/*
Template Name: Projets
Template Post Type: post, page, product, projets
*/
$context = Timber::get_context();
$posts = Timber::get_posts( array(
'post_type' => 'projets',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
$context['posts'] = $posts;
Timber::render( [ 'single-projets.twig'], $context );
?>
and a single-projets.twig :
<div class="container-fluid">
{% for post in posts %}
<div class="row">
<div class="imgProjets">
<img src="{{ post.thumbnail.src }}" alt="">
</div>
<div class=" offset-9 col-3 title">
<a href="{{ post.link }}">
{{ post.title }}
</a>
</div>
</div>
<div class="row">
<div class="offset-9 col-3">
{{ post.meta('clients') }}
</div>
</div>
<div class="row">
<div class="offset-9 col-3 bg-light text-dark">
See the projects
</div>
</div>
{% endfor %}
</div>
And after that, i want to click on "See the projets" and see the content of FMXD OR Siemens, and not both.
Sorry it was quit long, but i really need your help, i'm really blocked....
This is the kind of code you might want in archive-projets.php, but not in a template for a single post.
This part:
$posts = Timber::get_posts( array(
'post_type' => 'projets',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
$context['posts'] = $posts;
is getting all projets posts and passing them to the view to be rendered in a loop.
You can replace that entire part with:
$context['post'] = new Timber\Post();
You don't need a loop in your Twig view at all, since there's only one post to render. So just remove {% for post in posts %} and the corresponding {% endfor %}.
I trying to make tooltips into laravelcollective
<div class="form-group col-sm-4">
{!! Form::label('exchange_id', 'Exchanges:') !!}
{!! Form::select('exchange_id', [''=>'Choose Options'] + $exchanges , null, ['class'=>'form-control', 'id'=>'exchange', 'name'=>'exchange_id', 'onchange' => 'all_function()'])!!}
</div>
In the above select box, {!! Form::label('exchange_id', 'Exchanges:') !!} I want to put Bootstrap tooltips like, Exchanges ? : with question mark.
How can I do this?
You can add attribute to label tag, data-toggle="tooltip" and title="Exchanges ?"
<div class="form-group col-sm-4">
{!! Form::label('exchange_id', 'Exchanges:', ['data-toggle' => 'tooltip', 'title' => 'Exchanges ?']) !!}
{!! Form::select('exchange_id', ['' => 'Choose Options'] + $exchanges, null, ['class' => 'form-control', 'id' => 'exchange', 'name' => 'exchange_id', 'onchange' => 'all_function()'])!!}
</div>
Need bootstrap plugin and use like it
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Tooltips: http://getbootstrap.com/docs/4.1/components/tooltips/
Demo: http://jsfiddle.net/xL1vteoj/
I'm using a partial view to display page header, that view accepts two variables one is Icon the other is a title.
pageHeader.blade.php:
<div class="page-header">
<div class="row">
<!-- Page header, center on small screens -->
<h1 class="col-xs-12 col-sm-4 text-center text-left-sm"><i class="fa {{$icon}} page-header-icon"></i> {{$title}}</h1>
</div>
and I'm using it like so:
#include('zdashboard._partials.pageHeader',['icon'=>'fa-pencil','title'=>'<strong>Editing</strong>'.$center->translations()->whereLang('en')->first()->name])
Sometimes I like to make one word strong or italic like the example above but, blade engine won't render the HTML tags I'm typing as part of title variable (the output like the photo down).
So is there any idea how to solve this? Am I doing it!
wrong?
The output
By default in Laravel 5 {{ $title }} construction wil be escaped.
If you don't want the data to be escaped, you may use the following syntax:
{!! $title !!}
Read more about Blade control structures: http://laravel.com/docs/5.0/templates#other-blade-control-structures
view
#if(Session::has('success'))
<div class="alert alert-success">
{!! Session::get('success')!!}
</div>
#endif
Controller
public function store(Request $request)
{
$this->validate($request, [
'product_code' => 'required|unique:products',
'product_name' => 'required',
'description' => 'required',
'price' => 'required',
'brand_id' => 'required',
'category_id' => 'required',
]);
$product = Product::create([
'product_code' => $request->input('product_code'),
'product_name' => $request->input('product_name'),
'description' => $request->input('description'),
'price' => $request->input('price'),
'brand_id' => $request->input('brand_id'),
'category_id' => $request->input('category_id'),
]);
return redirect()->route('products.index')->with('success',
"The product <strong>".$product->product_name."</strong> has successfully been created.");
}
Sorry for the stupid question, but I looked everywhere in the doc. If I want to set size, height and width of an image with HTML::image, how can I do it?
I tried with:
{{ HTML::image('path', array('width' => 70 , 'height' => 70)); }}
But it doesn't seem to work.
It should work with
{{ HTML::image('path', 'alt', array( 'width' => 70, 'height' => 70 )) }}
The alt text comes before the attributes array.
In Laravel 5 following ways to use img in blade:
{!! HTML::image('img/picture.jpg', 'a picture', array('class' => 'thumb')) !!}
Note: you need to install laravel library before use HTM i.e "laravelcollective/html": "~5.0",
OR
<img src="{!!asset('img/picture.jpg')!!}">
OR
Set dynamically url:
<img src="{!!asset('img/').'/'.$imgsrc!!}">
Solution : store image path to your MYSQL table field. And dont forget the dot ( . ) at the beginning of filepath.
<img src='./images/bajja_huggy2.gif' class= img-responsive style= height: 22px; width: 100px; >
you can see how I have used twitter bootstrap and other properties.
#foreach($imagefiles as $img)
<div class="col-xs-2 ">
{{ $img->image_3}}
</div>
#endforeach
you can
{{ HTML::image($product->image, $product->title, array('width' => '90%', 'height' => '50%')) }}
it required to be Apostrophe if create inside the percent.
<img src="{{ asset('folder-name/pic_trulli.jpg')}}" class="img-fluid" style="min-width: 20px; min-height: 20px;">
<img src='./images/bajja_huggy2.gif' class= img-responsive style= height: 22px; width: 100px; >
Can you help me to write this form tag in blade sintax:
<form name="room" id="1" method="post" class="narrow_width">
Thank you!
See http://laravel.com/docs/html for the Form syntax and methods.
You can wrap these in Blade tags.
{{ Form::open() }}
{{ Form::text('username') }}
Etc... In your case
{{ Form::open(array('name' => 'room', 'method' => 'post', 'class' => 'narrow_width', id => '1')) }}