I am new to Bootstrap and trying to create a unique data-target name for each record in my database. Can this be done in Bootstrap?
My code looks like this:
$i = 0;
while($row=mysql_fetch_array($result, MYSQL_ASSOC))
{
ob_start();
echo "
<div class='container'>
<div class='row features container-fluid'>
<div class='row'>
<div class='well-sm'>
<div class='thumbnail'>
<div class='caption'>
Name: $tempname</br>
<button type='button' class='btn btn-sm btn-info'
data-toggle='collapse' data-target='#demo[$i]'>
click for details</button>
<div id='demo[$i]' class='collapse'>$tempdescription</div>
</div>
</div>
</div>
</div>
</div>
</div>
";
$classdata = ob_get_contents();
ob_end_clean();
$i++;
?>
<div class="more-less">
<div class="more-block">
<?php echo $classdata ?>
</div>
</div>
<?php
}
Related
I am trying to get a file name from database, attach a proper path to it and get it downloaded on my system. Unfortunately I get a DirectoryNotFoundException.
The button I click Is : "Download Id Proof"
An unhandled exception occurred while processing the request.
DirectoryNotFoundException: Could not find a part of the path 'D:\images\Apply\POfId\10157d06-bf72-4ea1-b316-b22ac5feae20.jpg'.
System.IO.FileStream.ValidateFileHandle(SafeFileHandle fileHandle)
Here is my view markup:
#model Derawala.Models.ViewModels.ParentForApply
#{
ViewData["Title"] = "Details";
Layout = "_Layout";
}
<h1>Details</h1>
<form method="post">
<input asp-for="#Model.Apply.PofId" hidden />
<div class="container backgroundWhite pt-4">
<div class="card" style="border:1px solid #000000; ">
#*<div class="card-header bg-dark text-light ml-0 row container" style="border-radius: 0px;">*#
<div class="card-header" style="background-color:black;">
<div class="row">
<div class="col-12 col-md-6 align-self-start">
<h1 class="text-white">#Model.Apply.FirstName #Model.Apply.LastName</h1>
</div>
<div class="col-12 col-md-6 align-self-end">
<h1 class="text-warning">Application Id :#Model.Apply.AppId</h1>
</div>
</div>
</div>
<div class="card-body">
<div class="container rounded p-2">
<div class="row">
<div class="col-12 col-lg-4 p-1 text-center">
<img src="#WC.ImagePath[0]#Model.Apply.Photo" class="rounded w-25" />
</div>
<div class="col-12 col-lg-8">
<div class="row pl-3">
<div class="col-12">
<span class="badge p-3 border" style="background-color:lightpink">#Model.Apply.Qualification</span>
<span class="badge p-3 border" style="background-color:lightskyblue">#Model.Apply.SchType</span>
<h3 class="text-success"></h3>
<p class="text-secondary">#Model.Apply.Description</p>
</div>
</div>
<div class="row pl-3">
<div class="col-12">
Download Id Proof : <button type="submit" class="btn-primary" asp-route-id="#Model.Apply.PofId" asp-action="DownloadFile">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer bg-dark">
<div class="row">
<div class="col-12 col-md-6 ">
<a asp-action="RemoveFromCart" class="btn btn-primary btn-square form-control btn-lg" style="height:50px;">Donate Now <i class="fas fa-hand-holding-medical"></i></a>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-danger form-control btn-lg" style="height:50px;">Delete This Application <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
Here this is the code for the controller method:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> DownloadFile(string id)
{
string DirPath = _webHostEnvironment.WebRootPath;
var objdata = _db.Apply.Where(i => i.PofId == id).FirstOrDefault();
string FileName = objdata.PofId;
var FilePath = Path.Combine(DirPath,WC.ImagePath[1], FileName);
var memory = new MemoryStream();
using (var stream = new FileStream(FilePath,FileMode.Open))
{
await stream.CopyToAsync(memory);
}
memory.Position = 0;
var contentType = "APPLICATION/octet-stream";
return File(memory, contentType, FileName);
}
You can see the error in detail in this screenshot
You can also see that the image and the path actually exist in this screenshot
I realise that this has been asked a number of ways already, but for the life of me I cant find one that is similar to my issue....
I have the adapted the 'recognised' code in the documentation for showing dynamic content in a modal to the following.
Pulling my hair out, and sure I am just doing something silly.......
HTML for the call
<div class="row">
<?php $option=array_column($options, 'name', 'id');?>
<div class="col-5 col-md-6 col-lg-2 clickable" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">Engine 1</div>
<div class="col-7 col-md-6 col-lg-4">
<a href="#" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">
<?php echo $option[$vesseldata['Engine1Type']];?>
</a>
</div>
<div class="col-5 col-md-6 col-lg-2>Engine 1 Serial</div><div class="col-7 col-md-6 col-lg-4"><?php echo $vesseldata['Engine1Number'];?></div>
</div>
Then the script is just embedded in the page at the moment to try and make life easy.
<script>
$('#Engine2Modal').on('show.bs.modal', function (event) {
var trigger = $(event.relatedTarget); // Button that triggered the modal
var thing1 = trigger.data('thing1'); // Extract info from data-* attributes
var thing2 = trigger.data('thing2'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('.modal-title').text(thing1 + '<br>Serial # ' + thing2);
});
</script>
Then the Modal html is here
<div class="modal right fade in" id="Engine2Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<form id="service_form" method="get">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="control-label col-xs-4 col-md-3" for="DesignRef">Design Reference</label>
<div class="col-xs-8 col-md-7">
<input type="text" class="form-control" name="DesignRef" id="DesignRef" placeholder="Design Reference" value=""/>
<?php if(!empty($registration_error['DesignRef'])) { ?>
<br/>
<div class="alert alert-danger" role="alert"><?php echo $registration_error['DesignRef']; ?></div>
<?php } ?>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
Finally found it......
Found an article that explains that the text method is not actually the right one to use if you want to parse HTML. And in fact there is an HTML method in jQuery... :-)
modal.find('.modal-title1').html(item);
works.
I am making an content management system. I can upload a new content for my website, but having problem displaying the images to my carousel. All images that I've uploaded, it goes vertically.
For example: I uploaded 3 images it will looke like this
Image 1
Image 2
Image 3
Expected output:
<- Image 1 -> <- Image 2 -> <- Image 3 ->
Question: How can I put all my upload images in to my carousel?
View
<div class="container" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px;">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width: 85.5%;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php foreach($content as $row):?>
<div class="item active">
<center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center>
</div>
<?php endforeach;?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<?php foreach($content as $row):?>
<div class="item active">
// ...
This means that every one of your carousel items has the active class. As the docs describe, only one of them should be active, and that's the one that will be displayed first.
To make an dynamic carousel as #Dont Panic said, you only have to select one active for all of your items
<!-- Indicators -->
<?php $count = 0;
$indicators = '';
foreach ($content as $row):
$count++;
if ($count === 1)
{
$class = 'active';
}
else
{
$class = '';
}?>
<div class="item <?php echo $class; ?>">
<center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center>
</div>
$indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>';
<?php endforeach;?>
And #Dont Panic made an dynamic indicator(indicator is the small circle) which is this.
$indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br>
I've encountered a minor issue, what if I only want to display all Active images/content and to my indicator?
In the code of #Don Panic it will still display all the images even though the other images are inactive.
Example:
I have 6 images,
4 images are active
2 images are inactive/deactivate
Scenario:
In my indicator it displayed 6 even though the active are only 4.
So I improved his code into this
<div class="carousel-inner" role="listbox">
<?php $count = 0;
$indicators = '';
foreach ($content as $row):
$count++;
if ($count === 1)
{
$class = 'active';
}
else
{
$class = '';
}?>
<?php if($row->status == 'Active'):
$indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br>
<div class="item <?php echo $class; ?>">
<center><img src="<?= base_url().'uploads/'.$row->content_image?>" width="100%" alt="Menu"></center>
</div>
<?php endif;?>
<?php endforeach;?>
<ol class="carousel-indicators">
<?= $indicators; ?>
</ol>
</div>
Now it only displayed 4 images and also the indicator.
enter image description here The below code might help you if you have listed images on a page(or)view and now you want the image to popup and in the popup you need a carousel, as in the image i have uploaded.enter image description here
note: that you have also fetched the no. of images i.e count by using num_row();
note: in header you have added these cdn
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><!--BS CSS CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!--CDN FOR JQUERY-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><!--CDN FOR AJAX-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><!--BOOTSTRAP CDN-->
#model(gallery_m)
//FUNCTION TO COUNT THE NO. OF ROWS/IMAGES IN A DATABASE
public function count()
{
$this->db->select('*');
$q=$this->db->get('images');
if($q)PART ELSE IT WILL JUMP TO THE ELSE PART
{
return $q->num_rows();ADMIN/GALLERY()
}
else
{
return false;
}
}
//FUNCTION TO GET IMAGES FROM DATABASE
public function gallery()
{
$this->db->select('*');
$q= $this->db->get('images');
if($q->num_rows()>0)
{
return $q->result();
}
else
{
return false;
}
}
#controller(Admin)
public function gallery()
{
$this->load->model('gallery_m');
$data['images']= $this->gallery_m->gallery();
$data['count']= $this->gallery_m->count();
if($data['images'])
{
$this->load->view('gallery', $data);
}
}
#view(gallery)
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg"><!--MODEL-LG IS USED FOR BIGGER MODEL-->
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">Gallery</div><!--HEADER TITLE-->
<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button><!--USING THE REMOVE MODEL ICON-->
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="myGallery" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php for($i=1; $i <= $count; $i++):?><!--USING FORLOOP TO MAKE THE FIRST ITEM ACTIVE WHEN CONDITION $==1 IS SATISFIED-->
<?php if($i==1)
{
?>
<div class="carousel-item active"><img src="<?= $image->image ?>" alt="images" style="height: 800px; width:916px">
</div>
<?php
}
else
{
?>
<?php foreach($images as $image):?><!--USE OF SECOND FOREACH TO DISPLAY IMAGES THAT WE FERCHED FROM DATABASE-->
<div class="carousel-item"> <img src="<?= $image->image ?>" alt="images" style="height: 600px; width:916px">
</div>
<?php endforeach;?><!--END OF SECOND FOREACH LOOP-->
<?php
}
?>
<?php endfor;?><!--END OF FORLOOP-->
<!--end carousel-inner--></div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myGallery" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myGallery" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div><!--end carousel-->
</div> <!--end modal-body-->
<div class="modal-footer">
<div class="pull-left">
</div>
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--end modal-dialoge-->
</div><!--end myModal-->
<!-- Delete Button-->
<button type="submit" class="btn btn-danger remove" id="<?= $image->id?>"> Delete</button>
<!--Update anchor-tag-->
<?=anchor("admin/edit/{$image->id}", 'Edit', ['class'=>'btn btn-primary']);?>
<?php endforeach;?>
Hi
i have try to loop throw data in "Categories" Table and it works - i got data when i open View in first time but if i click on a tab to see its content i got only first record ?
i don't know why i lose all data i got in first time ?
Razor Code:
#section personAds{
<h2 class="title text-center">Person Ads</h2>
<div class="col-sm-12">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Cars</li>
</ul>
</div>
<div class="tab-content">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
{
<div class="tab-pane fade active in" id="propertytab">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="carstab">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
</div>
}
</div>
}
Controller Code:
public ActionResult Contact()
{
var model = _db.Categories.ToList();
return View(model);
}
and i try to remove where condition and i got same result - when i click on any tab i got only first record ?!
Please see the Video of Problem ... Click Here
From the look of your code I think you have simply got your 'foreach' in the wrong position.
It looks like you are creating repeated 'tab' DIV's which will each have just one record in.
This is probably somewhat better, notice I have moved the 'propertytab' outside of the #foreach
<div class="tab-pane fade active in" id="propertytab">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
{
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
}
</div>
<div class="tab-pane fade" id="carstab">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
}
</div>
I would like to style a site with 3 columns of info per row on medium & large devices, just two columns on small devices and one on mobile.
// This is the less I used:
.site_info_box_group {
.make-row();
.site_info_box {
.make-sm-column(6);
.make-md-column(4);
}
The problem is I have to use different markup for the different layouts.
Is it possible to do this sort of design using less. My feeling is that it
would work best if I put all the #site_info_box's into a single .site_info_box_group
and then styled every nth div to force it on to a new line - but I'm not sure how to
get this to work.
I have considered a javascript solution, but I want to understand if this is possible using pure less.
For three columns I'd need this markup
<div class="site_info_box_group">
<div class="site_info_box"> ... some markup here... </div>
<div class="site_info_box"> ... some markup here... </div>
<div class="site_info_box"> ... some markup here... </div>
<div>
<div class="site_info_box_group">
<div class="site_info_box"> ... some markup here... </div>
<div class="site_info_box"> ... some markup here... </div>
<div class="site_info_box"> ... some markup here... </div>
<div>
... etc
But for two columns I'd need this markup:
<div class="site_info_box_group">
<div class="site_info_box"> ... some markup here... </div>
<div class="site_info_box"> ... some markup here... </div>
<div>
<div class="site_info_box_group">
<div class="site_info_box"> ... some markup here... </div>
<div class="site_info_box"> ... some markup here... </div>
<div>
<div class="site_info_box_group">
<div class="site_info_box"> ... some markup here... </div>
<div class="site_info_box"> ... some markup here... </div>
<div>
... etc
To fix your problem you will need to add all your columns in the same row. For example:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">1</div>
<div class="col-md-4 col-sm-6">2</div>
<div class="col-md-4 col-sm-6">3</div>
<div class="col-md-4 col-sm-6">4</div>
<div class="col-md-4 col-sm-6">5</div>
<div class="col-md-4 col-sm-6">6</div>
<div class="col-md-4 col-sm-6">7</div>
<div class="col-md-4 col-sm-6">8</div>
</div>
</div>
See also: Bootstrap 3.0:responsive column resets section of the documentation i your case you seems to don't need a clearfix
When the height of your columns varies you will have to use the #grid-responsive-resets:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">1</div>
<div class="col-md-4 col-sm-6" style="height:50px;">2</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-4 col-sm-6">3</div>
<div class="clearfix visible-md visible-lg"></div>
<div class="col-md-4 col-sm-6">4</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-4 col-sm-6">5</div>
<div class="col-md-4 col-sm-6">6</div>
<div class="clearfix visible-sm visible-md visible-lg"></div>
<div class="col-md-4 col-sm-6">7</div>
<div class="col-md-4 col-sm-6">8</div>
</div>
</div>
Thanks to https://stackoverflow.com/users/1596547/bass-jobsen .
This is the less I used to make this solution work for me:
.site_info_box_group {
.make-row();
.site_info_box {
.make-sm-column(6);
.make-md-column(4);
}
.colsplit2{
.clearfix;
.visible-sm;
}
.colsplit3{
.clearfix;
.visible-md;
.visible-lg;
}
}
and this is the (simplified) code I used to draw the divs
<div class = "site_info_box_group">
<?php
function draw_div($content){
static $count=0;
print "<div class='site_info_box'>{$content}</div>";
$class ="";
if (0 == (($count+1) % 2)) {
$class .= " colsplit2 ";
};
if (0 == (($count+1) % 3)){
$class .= " colsplit3 ";
};
if (!empty($class)){
print "<div class='{$class}'></div>";
}
$count++;
}
foreach ($mycontent as $content){
draw_div($content);
}
?>
</div>