Thanks for previous helps. Am here with another one.
Ok, so i am retrieving data from database.. its working fine, but where i have issues is that after the data spans the first row it doesn't start from the first column of the next row.. I don't know how to explain this better ... but I'I'll add the code and image here....
<div class="row">
<?php
$selectCat = "SELECT * FROM categories ORDER BY cat_id DESC";
$selectCatKwary = mysqli_query($link, $selectCat);
$catCount = mysqli_num_rows($selectCatKwary);
if ($catCount > 0) {
?>
<?php
while ( $catRow = mysqli_fetch_array($selectCatKwary)) { ?>
<a href="">
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="content">
<div class="row">
<div class="col-xs-5">
<div class="icon-big icon-warning text-center">
<i class="ti-user"></i>
</div>
</div>
<div class="col-xs-7">
<div class="numbers">
<p class="text-uppercase text-bold"><?php echo $catRow['catTitle']; ?></p>
105GB
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<?php } } ?>
</div>
and here is the image
The first four data resolved well... the next one which MOBILE CARS did not start from the beginning column, and also affected others
Related
Why is my code displaying multiple rows instead of 1?
I can upload any number of photos to my site, but it only displays 4 photos across, the 4 most recently uploaded, on the website. I want it to display 4 rows of photos, instead of 1 row.
<div class="profile_box_body">
<?php
if(!empty($RecentPhotos)){
?>
<div class="profile_photos_list row">
<?php
foreach($RecentPhotos as $value){ ?>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 media_item block-center">
<div class="profile_photo ">
<!--<a href="javascript:void();" class="clickable" data-toggle="modal" data-target="#myModal">-->
<a href="<?=WATERMARK_FILE!=''?DisplayImageWithWatermark($value):DB_DOMAIN.'uploads/images/'. $value['bigimage']; ?>" data-fancybox="gallery<?php echo $value["aid"] ?>" >
<div class="img-container-large">
<div class="img-responsive-container img-responsive-container--border">
<img src="<?=$value['image']; ?>" class="pImageBorder img-responsive-container__img">
</div>
</div>
<div class="pImageUsername"><b><?=$value['title']; ?></b><br/><?=$value['description']; ?></div>
</a>
</div>
</div>
<?php
}
?>
</div>
<?php
}
else {
?>
<a class="" style="float: none; text-align: center" href='<?=getThePermalink('account/&dll=gallery')?>'><p> <?=$lang_register_page['a14'] ?></p></a>
<?php
}
?>
</div>
This is not a problem with your HTML or CSS. The problem is into your PHP query. You should check first that, is there a limit = 1 called into your query?
I've been trying to align my checkout columns side by side for hours and finally decided to swallow my pride and ask for help, I can imagine it's something pretty simple but I can not find it,
When I visit here, and add anything to cart to see the problem, the columns are not aligned side to side, just underneath each other.
Running with Bootstrap + WordPress + Woocommerce.
SCREENSHOT
https://ibb.co/bK382Z8
CODE:
<div class="">
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<div class="row" id="customer_details">
<div class="col-xs-12 col-md-6">
<div class="checkbox-form">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
<div class="col-xs-12 col-md-6">
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<h3 id="order_review_heading"><?php _e( 'Your order', '99fy' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</div>
</div>
<?php endif; ?>
</form>
The second column that is going under is not in the row, you can see this in HTML. Add the second column inside the row and it should work.
It's roughly supposed to look like this:
<div class="row" id="customer_details">
<div class="col-xs-12 col-md-6">
<div class="checkbox-form">...</div>
</div>
<div class="col-xs-12 col-md-6">
<h3 id="order_review_heading">Your order</h3>
<div id="order_review" class="woocommerce-checkout-review-order">...</div>
</div>
</div>
I am getting comments from a database, I have a row with two columns, I am looping through the database table which contains two results, for some reason the data that is retrieve from the database is being duplicated.
comments view
<?php foreach ($query->result_array() as $row) { ?>
<div class="row ">
<div class="large-6 columns">
<div class="callout large ">
<p class=""><?php echo $row['comment'];?></p>
</div>
</div>
<div class="large-6 columns">
<div class="callout large bluebg ">
<p class="white"><?php echo $row['comment'];?></p>
</div>
</div>
</div>
<?php } ?>
query
function get_testimonies() {
$query = $this->db->query('SELECT comment FROM testimonies');
return $query;
}
current result
comment 1 comment 1
comment 2 comment 2
expected result
comment 1 comment 2
You have an echo two times, try something like:
<?php foreach ($query->result_array() as $row)
{
?>
<div class="row ">
<div class="large-6 columns">
<div class="callout large ">
<p class=""><?php echo $row['comment'];?></p>
</div>
</div>
</div>
<?php
}
?>
I've made a list with <li> tags which looks like this.
https://gyazo.com/764cbe3542522bc552d774e1383ac810
Why is there a random <li> tag down there? There is nothing there to say at all?
<center>
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover" style="text-align:left;margin-top:30px;">
<div class="card card-outline-primary">
<div class="card-header card-primary">
Database breaches
</div>
<div class="card-block">
<p>Here is a list of all databases that have been added to our search engine.</p>
<li>
<p>
<?php
$this->load->database();
$this->db->from('databases');
$query = $this->db->get();
foreach($query->result() as $q) {
?>
<?=$q->Website?> hacked on
<?=$q->Date?> with
<?=$q->Users?> users
<br />
<li>
<p>
<?php
}
?>
</div>
</div>
</div>
</div>
</div>
</center>
Here is a version of your exact code but I ran the "tidy" function in the snippet. See how it's broken?
You're not closing things properly, see the code comments. Also, you're incorrectly nesting the tags, the li is closed before the p even though it starts before it.
Technically, you're adding a new li element when you're trying to close the tag because instead of </li> you're doing <li>.
<center>
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover" style="text-align:left;margin-top:30px;">
<div class="card card-outline-primary">
<div class="card-header card-primary">
Database breaches
</div>
<div class="card-block">
<p>Here is a list of all databases that have been added to our search engine.</p>
<li>
<p>
<?php $this->load->database(); $this->db->from('databases'); $query = $this->db->get(); foreach($query->result() as $q) { ?>
<?=$q->Website?> hacked on
<?=$q->Date?> with
<?=$q->Users?> users
<br />
<li> <!-- NOT A CLOSING TAG -->
<p> <!-- NOT A CLOSING TAG, ALSO SHOULD BE BEFORE THE CLOSING LI TAG -->
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</center>
I am building a product grid built upon AngularJS data - where there will be images and product details (text)
The text sometimes extends to the 2nd line, causing havoc.
Here is my code:
<div class="row">
<div data-ng-repeat="s in Results">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<div>
<img ng-src="{{s.ProductImage}}" class="img-responsive">
</div>
<div>
{{s.Store}} {{s.Category}} {{s.ProductName}}
</div>
</a>
</div>
<div class="clearfix visible-xs-block"></div>
</div>
</div>
This is what it looks like:
How do I fix it so that <div>s all have the same height?
I tried to look online for solutions, but I think I am 50% there. Please help.
Note: I Don't want to hide content.
This is what I ended up doing for anyone who stumbles on this again in the future.
Javascript
function ResizeToLargestElement(element) {
var maxHeight = -1;
if ($(element).length > 0) {
$(element).each(function () {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$(element).each(function () {
$(this).height(maxHeight);
});
}
}
Without AngularJS
For those who aren't using AngularJS, just call ResizeToLargestElement() when data changes or the window is resized using
$(window).resize(function() {
ResizeToLargestElement('.AutoResizeToLargestElement');
});`
With AngularJS
The idea is to call the ResizeToLargestElement() function whenever $scope.Results changes or when the window resizes.
To know when $scope.Results changed is easy, but to know when elements (that are bound to it) finished rendering is not easy. To do that, you need a AngularJS directive.
To know when the window re-sizes, use angular.element($window).on('resize', function () {...});
HTML
<div class="row">
<div data-ng-repeat="s in Results" data-ng-repeat-finished> <!--ADDED Directive-->
<div class="col-xs-4">
<a href="#" class="thumbnail AutoResizeToLargestElement"> <!--ADDED Class-->
<div>
<img ng-src="{{s.ProductImage}}" class="img-responsive">
</div>
<div>
{{s.Store}} {{s.Category}} {{s.ProductName}}
</div>
</a>
</div>
<!--REMOVED clearfix-->
</div>
</div>
MyDirectives.js
angular.module('myApp').directive('ngRepeatFinished', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
mycontroller.js
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
ResizeToLargestElement(".AutoResizeToLargestElement");
});
angular.element($window).on('resize', function () {
ResizeToLargestElement(".AutoResizeToLargestElement");
});
Note: this requires you to include $window in the AngularJS dependency list.
I.E. angular.module('myApp').controller('....', ['...., '$window', ....]);
If you want to keep the height of each product dynamic, you will need to split the results into columns. And then use ng-if to put the right items in the right column. Every 3rd item will go into the same column. To set them to different columns, just reduce the $index by 1 for each extra column.
<div class="row">
<div class="col-xs-4">
<div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="$index%3==0">
<div>
<img ng-src="{{s.ProductImage}}" class="img-responsive" />
</div>
<div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
</a>
<div class="clearfix visible-xs-block"></div>
</div>
</div>
<div class="col-xs-4">
<div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="($index-1)%3==0">
<div>
<img ng-src="{{s.ProductImage}}" class="img-responsive" />
</div>
<div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
</a>
<div class="clearfix visible-xs-block"></div>
</div>
</div>
<div class="col-xs-4">
<div ng-repeat="s in Results"> <a href="#" class="thumbnail" ng-if="($index-2)%3==0">
<div>
<img ng-src="{{s.ProductImage}}" class="img-responsive" />
</div>
<div>{{s.Store}} {{s.Category}} {{s.ProductName}}</div>
</a>
<div class="clearfix visible-xs-block"></div>
</div>
</div>
</div>
You can manually restrict the height of the div and use an overflow. Use something like
<div class="col-xs-4" style="height:200px; overflow: auto;">Content</div>
Or, you could always use a responsive table (<table class="table table-responsive">) for your layout.
The best solution for this problem is to add clearfix class to hidden divs for earch size of viewport. for example:
Large size: i want 6 columns (large desktops)
Medium size: i want 4 columns (Desktops)
Tablets: i want 3 coumns
phones: i want 2 columns
so i have the products list:
<?php $count=1; foreach($productList as $product) : ?>
<div class="item col-xs-6 col-sm-4 col-md-3 col-lg-2">
Picture and description
</div><!-- /item -->
<?php if( ($count%2)==0) {?><div class="clearfix visible-xs-block"></div><?php }?>
<?php if( ($count%3)==0) {?><div class="clearfix visible-sm-block"></div><?php }?>
<?php if( ($count%4)==0) {?><div class="clearfix visible-md-block"></div><?php }?>
<?php if( ($count%6)==0) {?><div class="clearfix visible-lg-block"></div><?php }?>
<?php $count++; endforeach?>