I have two tabs on a page. Both tabs posses some dynamic data fetched from MYSQL db. While opening popular tab data, clicking "get code" button the modal appears. But in the other tab ending tab,clicking "get code" button the modal does not appear. Why is it so? How to resolve it.
CODE
<ul class="nav nav-tabs responsive-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#popular"><i class="ti-bar-chart"></i>Popular </a> </li>
<li class=""><a data-toggle="tab" href="#ending"><i class="ti-timer"></i> Ending soon</a> </li>
</ul>
<div class="tab-content clearfix" id="myTabContent">
<div id="popular" class="tab-pane counties-pane active animated fadeIn">
<?php
$q=mysqli_query($con," SELECT c.* , sc.* , sm.* ,ca.* from store_category sc INNER JOIN store_manufacture sm ON sm.sm_id=sc.store_id INNER JOIN categories ca ON ca.cat_id=sc.cat_id INNER JOIN coupons c on c.c_sc_id=sc.sc_id where sm.sm_display=1 AND ca.cat_switch=1 limit 10 ");
while($row1=mysqli_fetch_array($q,MYSQLI_ASSOC)) {
$h = strpos($row1['sm_link'], 'http');
?>
<div class="coupon-wrapper row">
<div class="coupon-data col-sm-2 text-center">
<div class="savings text-center">
<div>
<div class="large"><?php echo $row1['c_name'] ?></div>
<div class="small">off</div>
<div class="type"><?php echo $row1['sm_brand_name'] ?></div>
</div>
</div>
</div>
<div class="coupon-contain col-sm-7">
<h4 class="coupon-title"><?php echo $row1['c_description']?></h4>
<p data-toggle="collapse" data-target="#<?php echo $row1['c_id']?>">Shop these <?php echo $row1['sm_brand_name'] ?> deals of the day to save as much...</p> <p id="<?php echo $row1['c_id'] ?>" class="collapse">Don't miss out on all the coupon savings.Get you coupon now and save big</p>
<!-- end:Coupon details -->
</div>
<!-- end:Coupon cont -->
<div class="button-contain col-sm-3 text-center">
<p class="btn-code" data-toggle="modal" data-target="#couponModal<?php echo $row1['c_id']?>" data-id="<?php echo $row1['c_id'] ?>" data-backdrop="false" data-dismiss="modal">
<span class="partial-code"><?php echo $row1['c_code'] ?></span>
<span class="btn-hover">Get Code</span>
</p>
</div>
</div>
<div class="coupon_modal modal fade couponModal" style="background-color: rgba(0, 0, 0, 0.5);" id="couponModal<?php echo $row1['c_id'] ?>" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="ti-close"></i></span> </button>
<div class="coupon_modal_content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h2><?php echo $row1['c_name'] ?></h2>
<p><?php echo $row1['c_description'] ?></p>
</div>
<div class="row">
<div class="col-sm-12">
<h5 class="text-center text-uppercase m-t-20 text-muted">Click below to get your coupon code</h5></div>
<div class="col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3"> <span class="coupon_icon"><i class="ti-cut hidden-xs"></i></span> <?php echo $row1['c_code'] ?>
</div></div></div> </div></div></div></div>
<?php
}
?>
</div>
<!--ending tab -->
<div id="ending" class="tab-pane counties-pane animated fadeIn">
<?php
$q=mysqli_query($con,"SELECT c.* , sc.* , sm.* ,ca.* from store_category sc INNER JOIN store_manufacture sm ON sm.sm_id=sc.store_id INNER JOIN categories ca ON ca.cat_id=sc.cat_id INNER JOIN coupons c on c.c_sc_id=sc.sc_id WHERE sm.sm_display=1 AND ca.cat_switch=1 AND c.c_date_expired >= CURDATE() AND c.c_date_expired <= DATE(DATE_ADD(CURDATE(), INTERVAL +20 DAY))");
while($row1=mysqli_fetch_array($q,MYSQLI_ASSOC)) {
$h = strpos($row1['sm_link'], 'http');
?>
<div class="coupon-wrapper row">
<div class="coupon-data col-sm-2 text-center">
<div class="savings text-center">
<div>
<div class="large"><?php echo $row1['c_name'] ?></div>
<div class="small">off</div>
<div class="type"><?php echo $row1['sm_brand_name'] ?></div>
</div>
</div>
</div>
<div class="coupon-contain col-sm-7">
<ul class="list-inline list-unstyled">
<li class="sale label label-pink">Ending soon- Last Date:<?php echo $row['c_date_expired'] ?></li>
<li class="popular label label-success">100% success</li>
<li><span class="verified text-success"><i class="ti-face-smile"></i>Verified</span></li>
</ul>
<h4 class="coupon-title"><?php echo $row1['c_description']?></h4>
<p data-toggle="collapse" data-target="#<?php echo $row1['c_id']?>">Shop these <?php echo $row1['sm_brand_name'] ?> deals of the day to save as much...</p> <p id="<?php echo $row1['c_id'] ?>" class="collapse">Don't miss out on all the coupon savings.Get you coupon now and save big</p>
<!-- end:Coupon details -->
</div>
<!-- end:Coupon cont -->
<div class="button-contain col-sm-3 text-center">
<p class="btn-code" data-toggle="modal" data-target="#couponModal<?php echo $row1['c_id']?>" data-id="<?php echo $row1['c_id'] ?>" data-backdrop="false" data-dismiss="modal">
<span class="partial-code"><?php echo $row1['c_code'] ?></span>
<span class="btn-hover">Get Code</span>
</p>
</div>
</div>
<div class="coupon_modal modal fade couponModal" style="background-color: rgba(0, 0, 0, 0.5);" id="couponModal<?php echo $row1['c_id'] ?>" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="ti-close"></i></span> </button>
<div class="coupon_modal_content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h2><?php echo $row1['c_name'] ?></h2>
<p><?php echo $row1['c_description'] ?></p>
</div>
<div class="row">
<div class="col-sm-12">
<h5 class="text-center text-uppercase m-t-20 text-muted">Click below to get your coupon code</h5></div>
<div class="col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3"> <span class="coupon_icon"><i class="ti-cut hidden-xs"></i></span> <?php echo $row1['c_code'] ?>
</div></div></div> </div></div></div></div>
<?php
}
?>
</div>
Related
I am currently creating my now website and I want to have a modal containing text an images. The images are stored in a carousel.
Everything works pretty well except for the image sizing.
In store in my database images with different sizes and orientation.
When I click on an image it opens a modal and displays information about the image and the image itself. However not every images fit the modal, some of them are distorted.
I don't get how am I supposed to solve the problem, should I add CSS to the modal? To the carousel?
I think the best way should be to reduce the size of the image if it cannot fit the modal.
here is my code:
<div class="modal fade" id="modal-<?php echo $id; ?>" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5 class="modal-title" id="modalLabel"><?php echo $title; ?></h5>
<div class="mt-5">
<p><?php echo $technique; ?></p>
<p><?php echo $size; ?></p>
<p><?php echo $date; ?> </p>
<p><?php echo $location; ?></p>
</div>
</div>
<div class="col-md-8">
<div class="carousel slide" id="imageCarousel-<?php echo $id ?>"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="1"
data-target="#imageCarousel-<?php echo $id ?>"
class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="<?php echo $url ?>"
alt="image slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">Inquire</button>
</div>
</div>
</div>
</div>
On the screenshot below, the picture should be stretched more vertically.
Try add to the class carousel slide the following CSS style:
vertical-align: middle;
I find the answer thanks to another stack overflow post by adding :
.w-100 {
width: 100% !important;
height: 100%;
}
to my CSS stylesheet :)
Card looks like this. i just want it to display to the side
Im trying to show data from my database in PHP codeigniter. the data shows fine. but the problem is that the card is going down istead to right. you can look at the image above.
i just want to make the card go to the right when i do foreach. and go down after 4/5 card.
i ve tried to move the foreach code but it looks just like that.
im using bootsrap 4
here's the code
<div class="row">
<div class="container">
<div class="card-body">
<?php
foreach ($user as $u) {?>
<div class="col-md-2 mt-4">
<div class="card mt-3" style="width:15rem;">
<img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"
class="card-img-top img-responsive" alt="...">
<h5 class="card-title font-weight-bold "><?php echo $u->nama_game; ?></h5>
<p class="card-text"><?=$u->deskripsi_game;?></p>
<a href="<?=base_url() . 'assets/games/' . $u->link_game;?>"
class="btn btn-primary btn-block">Mainkan Game</a>
</div>
</div>
</div>
<?php }?>
</div>
</div>
you are repeating currently the whole container inside the row, but u want to repeat the cols inside the container.
Try this (loop over the col-md-2):
<div class="row">
<div class="container">
<div class="card-body">
<?php
foreach ($user as $u) {?>
<div class="col-md-2 mt-4">
<div class="card mt-3" style="width:15rem;">
<img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"
class="card-img-top img-responsive" alt="...">
<h5 class="card-title font-weight-bold "><?php echo $u->nama_game; ?></h5>
<p class="card-text"><?=$u->deskripsi_game;?></p>
<a href="<?=base_url() . 'assets/games/' . $u->link_game;?>"
class="btn btn-primary btn-block">Mainkan Game</a>
</div>
</div>
</div>
<?php }?>
</div>
</div>
</div>
EDIT:
Your HTML structure was a little mixed up.
Try this. col-md-3 places 4 cols inside of your row, or col-md-2if you want 6 cols inside of your row. A row is max 12 cols bootstrap grid documentation
<div class="container">
<div class="row">
<?php foreach ($user as $u) {?>
<!-- col-md-2 -->
<div class="col-md-4 mt-4">
<div class="card">
<div class="card-body">
<img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"class="card-img-top img-responsive" alt="...">
<h5 class="card-title font-weight-bold "><?php echo $u->nama_game; ?></h5>
<p class="card-text"><?=$u->deskripsi_game;?></p>
Mainkan Game
</div>
</div>
</div>
<!-- col-md-2 end -->
<?php }?>
</div>
</div>
I have a PHP class with HTML code displaying three cards in a row in a column. When I add over 8 items onto the page it formats incorrectly i.e. it will put three in a row which it is meant to then put 1 then put 3 more etc (see attached image). Unsure why this is happening.
<div class="container">
<div class="col-md-4">
<div class="card profile-card-2">
<div class="card-img-block">
<?php echo'<img class="img-fluid" src="data:image/jpg;base64,' . base64_encode( $results['image'] ) . '" />' ?>
</div>
<div class="card-body pt-5">
<h5 class="card-title"><?php echo $results['name']?></h5>
<h5 class="card-text"><?php echo "Event Attended: ".$results['event_attended']." "?></h5>
<h5 class="card-text"><?php echo "Charity: ".$results['charity_name']." "?></h5>
<p class="card-text"><?php echo $results['feedback']?></p>
</div>
<div class="w3-half event">
<button class="myBtn btn btn-primary">Read More</button>
<div id="myModal" class="modal details-modal" class="modal-fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"><?php ?></h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Event Description </h3>
<h5 class="card-title"><?php echo $results['name']?></h5>
<h5 class="card-text"><?php echo "Event Attended: ".$results['event_attended']." "?></h5>
<h5 class="card-text"><?php echo "Charity: ".$results['charity_name']." "?></h5>
<hr>
<p><?php echo $results['feedback'] ?><br></p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It is meant to display 3 in a row and start a new row where need be
I have created a accordion and its in a loop but i want only one accordion open at a time not multiple one. I have used data parent attribute of bootstrap but its not working. Any kind of help would be highly appreciated.
I want only one accordion open at one time. How to achieve it. I think i'm having this problem because of for each loop. Is there any way to solve it ?
Here is my code :
<?php if(!empty($tickets)) : ?>
<?php foreach($tickets as $ticket) : ?>
<div class="panel-group-custom" id="#panels">
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading.panel-heading-custom" >
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
<?php else : ?>
No Records
<?php endif ?>
Try putting your #panels div outside the foreach loop - that way they are all in the same group.
Also, your #panels div should not have the "#" sign in its id.
<?php if(!empty($tickets)) : ?>
<div class="panel-group-custom" id="panels"><!-- Remove the '#' from here. -->
<?php foreach($tickets as $ticket) : ?>
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading panel-heading-custom" ><!-- and remove the . from here. -->
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</div><!-- end #panels (moved to after the foreach) -->
<?php else : ?>
No Records
<?php endif ?>
Here is the working version with the PHP stripped out: https://jsfiddle.net/ytcw2sot/
Error I have an unwanted /a> showing up on a display page as Branch Line Card/a>. The link should read Branch Line Card. The error has not appeared until recently. I am not a coder in general - please help! The page link is http://guardianbp.com/branches/
Here is a sample of the code:
<!-- Product Catalog -->
<?php if ( !empty( get_field('branch_product_catalog'))): ?>
<section class="pt-medium pb-medium gray-bg">
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1 "></div>
<div class="col-md-10 col-sm-10 col-xs-10 text-center">
<h1><span class="blue">Branch Line Card</span></h1>
<div class="lgbtn-icon-bg">
<a href="<?php the_field('branch_product_catalog'); ?>">
<button type="button" class="btn btn-lg-productcatalog btn-lg">
<i class="fa fa-book fa-5x"></i>
<h2><small>view the</small><br />
<?php the_title(); ?><br />
Branch Line Card</h2>
</button>
</a>
</div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1"></div>
</div>
</div>
</section>
<?php endif; ?>
It looks like a mis-matched delimiter. There appears to be a lone "< a/>" floating between:
</button>
</a>
</div>