I want to display setFlash message on specific div.
here is my controller and view page code.
my controller code is:
public function actionCreate() {
Yii::$app->session->setFlash('success', 'message');
return $this->redirect(['site/page']);
}
my view page code is:
<section class="main">
<div class="panel panel-default">
<div class="panel-heading panel_heading">
</div>
<div class="panel-body">
(get flash message here)
</div>
</div>
</section>
In your php page you must insert the proper echo
use common\widgets\Alert;
<section class="main">
<div class="panel panel-default">
<div class="panel-heading panel_heading">
</div>
<div class="panel-body">
<?= Alert::widget() // get flash message here) ?>
</div>
</div>
</section>
Related
Help please!
I'm creating a FAQs webpage where theres approx 50 questions. Therefore, I'm using collapsible divs so that the page isn't too long. Below is the code I've used so far.
I'm wondering if its possible to have a hyperlink (e.g. /#question20) where I can jump to a particular div which is automatically expanded by clicking on the hyperlink?
Also, what would be the best way of creating expand all / collapse all buttons?
Thanks in advance!
<div class="panel-group" style="width: 70%; float: right; min-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 1</strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Answer 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 2</strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Answer 2</div>
</div>
</div>
With only html you can use <details> and <summary> tag
If you want use javascript, you should create a tag and add a load event listener to it.
in the function associated for that listener you can toggle a class called hidden or change directly the style, for example we change the style with a new class called hidden to the divs you can expand and hide:
change your html to add a new class to the hidden div:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 1</strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 2</strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 2</div>
</div>
</div>
add a new css rule
.hidden {
display: none;
}
and finally the script:
<script>
document.addEventListener('DOMContentLoaded',function() {
var expandLinks = document.querySelectorAll('.panel-heading .panel-title a ');
for(var i = 0; i < expandLinks.length; i++) {
expandLinks[i].addEventListener('click', function(event) {
console.log(event.currentTarget);
var selector = event.currentTarget.getAttribute("href");
var answersDiv = document.querySelector(selector);
answersDiv.classList.toggle('hidden');
});
}
});
</script>
I want to build a collapse list and that list of data is from my database. That's why i used foreach($mother->result() as $row). Each collapse data shown on the browser has its own sub list again which have Panel Body and Panel Footer. What i got from these code on the browser was when i clicked other collapse data buttons instead of first button, it also showed me the first sub list of first collapse data button.
<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
<?php
$mother = $this->db->query("SELECT Description,ChildNode from mrpreport.report where MotherNode='MAIN'");
foreach($mother->result() as $row) {
?>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><?php echo $row->Description?></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
<?php } ?>
</div>
</div>
</div>
<a data-toggle="collapse" href="#collapse1"><?php echo $row->Description?></a>
You can see your href point to id collapse1, instead of that, you should set $i = 0 outside, then echo $i++; inside link element.
I hope it can help you.
Hi there i am trying to make a pannel in bootstrap. I am new to this so sorry if this is a simple question. I am trying to create a pannel like this website : Website
So far i have made the header , body and footer , however i cant create the body part of it, i am stuggling to create it and everything i try is not working. If anyone can assist me in this and explain it would be great help
Code so far:
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
Thanks for the help guys xx
Edit: Sorry i should have made it clear. The problem i am having is creating the content in the body part. So creating anther pannel for the image, then the button and then the list of ingredients. This is my main problem
You should be able to nest them as needed, so this should work.
<body>
<div class="container">
<h2>Panel Heading</h2>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">inner Panel Heading</div>
<div class="panel-body">innner panel body</div>
<div class="panel-footer">inner Panel Footer</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">inner Panel Heading</div>
<div class="panel-body">innner panel body</div>
<div class="panel-footer">inner Panel Footer</div>
</div>
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
here's a code pen of the layout
I have the below HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content Panel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</body>
</div>
but there is a gap between each panels
Above example is only sample. I am planing to use a loop to generate the panels and show news contents on the page could go up to over 100 panels on the page.
My question is how to remove the above gaps ?
i think its will help you for looping panel in bootstrap,
<div class="container">
<div class="row">
<?php
for ($i=1; $i <100 ; $i++) { ?>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content Panel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel content
</div>
</div>
</div>
<?php
$no++;
$x= $no % 3;
if ($x=='0') { ?></div><div class="row" style="">
<?php } }?>
I make it 4 column in one row
Bootstrap isn't designed to do that. If you notice it will push the next combined elements whose width = 12 col's down past the highest element.
So in your example image you have 4 col-md-3's which equals 12. The farthest right element has the most content, therefor the next element, may it be a col-md-12 or col-md-3 will be pushed lower then that element.
Its hard to build a masonry layout without any jQuery or Javascript help..
Edit -
A solution is possible without the use of jQuery or javascript. By use of Flexbox you can create a 'masonry' style layout.
Take a look at this article that explains more on a Flexbox masonry layout.
Read up on css "display:flex" property. You should be able to align all of the panes to the same size using that.
It is best explained here:
http://clearleft.com/thinks/270
Basically, set the parents property style in the css to display:flex and set the flex-warp property to wrap
Then set the height of the panel to be 100% so that it takes the height of the whole container. See the above link to figure out how to change the contents inside the panel to deal with flex.
I have two rows of nested panels inside of a primary panel. The 1st row has 3 panels of unequal heights. How do I make the 3 panels to be the same height of the highest panel (panel #3 in the jsfiddle link)?
Here's the jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/
I would like panel #1 and panel #2 the same height of panel #3, or whichever the tallest panel would be.
Thanks for the help.
Here's my markup:
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">outer</div>
<div class="row">
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">1</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">111</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">2</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">222</div>
<div class="list-group-item">222</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">3</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<span>lower</span>
</div>
<div class="panel-body">
xyz
</div>
</div>
</div>
</div>
</div>
Try using map() to process each item and get the size of the tallest panel. Than apply this height to each panel.
JS
var heightTallest = Math.max.apply(null, $(".panel-info").map(function ()
{
return $(this).outerHeight();
}).get());
$('.panel-info').css({ height: heightTallest + 'px' });
Updated jsfiddle:
http://jsfiddle.net/MgcDU/8915/
using jquery apply height to children of .row
$('.row').each(function(){
var RowHeight = $(this).innerHeight();
$(this).children().css({ height: RowHeight + 'px' });
});
and set .panel height to what size you desire, eg. 100%
If you're okay with the browser compatibility limitations, you could try this CSS flexbox-based experimental code: https://github.com/twbs/bootstrap/pull/11851