I'm currently trying to find a way how to fill flex parent with flex childs. I have data in the database, so i pick those data by foreach loop. The thing is I want to have 4 flex children per row, as you can see in the following screenshot.
And I just can't think about any loop which could let me do this.
<div class="grid">
<?php foreach ($categories as $c): ?>
<div class="grid-row">
<div class="grid-pivot"><?= $c['categoryJmeno'] ?></div>
</div>
<?php endforeach; ?>
</div>
Thanks for any advice!
Just apply a width to those elements via CSS:
.grid-pivot {
width: 25%;
}
or maybe a little less (24%) if that doesn't work due to whitespace or similar.
If you want padding, include it and add box-sizing: border-box
.grid-pivot {
box-sizing: border-box;
width: 25%;
padding: 30px;
}
And if you want margin (like in the image you posted), use calc for the width to include it:
.grid-pivot {
width: calc(25% - 60px);
margin: 30px;
}
Related
I am new to ACF and want to use a repeater field to create a two column row. It is functioning how I want (two even, halved columns). I want each column to begin at the same height as the other, therefor I set the height. But I want to ensure I am using best practices... is how I wrote this the way you would recommend going about it? I feel like there is probably a better way.
Thank you in advance.
PHP
<div class="bg-white">
<div class="dib mw9 center">
<?php
if( have_rows('faq') ):
while ( have_rows('faq') ) : the_row(); ?>
<div class="parent">
<h4><?php the_sub_field('question'); ?></h4>
<p><?php the_sub_field('question_answer'); ?></p>
</div>
<?php endwhile;
else :
endif;
?>
</div>
</div>
CSS
.parent {
display: inline-block;
height: 240px;
width: 50%;
float: left;
padding: 48px 24px;
}
if you're able to add an additional class to the wrapping div (class="dib …"), lets call it '.parent-wrapper', you could simply use following code:
.parent-wrapper {
display: flex;
flex-wrap: wrap;
}
.parent {
flex: 50%;
padding: 48px 24px;
}
No need for height, as flex takes care of it. Here you're independent from the content length. So even very long answers would be formatted correctly.
I hope that helps :)
apologies for my bad title explanation. I've got a code which I'm trying to restyle, part of which is below. The PHP document I'm using does a (JSON) query to get active "boxes" to show up on screen, and automatically orders them as a list. I want the queried boxes in 2 columns, it doesn't have to be an ordered list.
Problem is, there is no li class in my .php file so I'm thinking I'll have to edit one of the classes below to achieve this?
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">'
<div class="x-column x-sm x-2-3";>
Is there a way to "add" li to the CSS or is there another way around it?
I know I can use a code like
display: block;
width: 50%;
float: left;
to add to my li class.. but I'd still need a li class right? Any help is greatly appreciated!
<div class="entry-content content homepage-agents">
<?php while(have_posts()): the_post();?>
<?php the_content();?>
<?php endwhile;?>
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">
<div class="x-column x-sm x-2-3";>
<div class="agent-data">
<?php
/**
* Detect plugin. For use on Front End only.
*/
require_once(ABSPATH . 'wp-admin/includes/plugin.php');
if(is_plugin_active('consulenten-plugin-business/consulenten-plugin-business.php')): $jm_cplb = new ConsulentenpluginBusiness(); endif;
if(is_plugin_active('consulenten-plugin-lite/consulenten-plugin-lite.php')): $jm_cplb = new ConsulentenpluginLite(); endif;
$array_boxes = (array)$jm_cplb->jm_cplb_loadjson();
This is some css..
}
.agent-container {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.agent-item {
width: 100% !important;
margin-bottom: 60px;
}
I'm not sure if this is possible but I'll ask anyway...
I'm trying to use the PHP shortcode in Advanced Custom fields
<?php the_field('charitynumber'); ?>
for our client to enter a number on the back end between 1-100. This will effect the height of a div showing/hiding an image based on a overall goal number for a charity. I'm thinking of setting it up like
<div style="<?php the_field('charitynumber'); ?>"><img src="/img_here.jpg"></div>
But cannot think of how to do it or an alternative way.
You need to put the shortcode in a valid style attribute. That means outputting the style name and appending the appropriate units. Also, if the_field() returns a string, you need to echo it.
<div style="height: <?php echo the_field('charitynumber'); ?>%;"><img src="/img_here.jpg"></div>
Give this a shot - you can
<div class="progress">
<div class="fillBar" style="height:calc(100% - <?php the_field('charitynumber'); ?>);"></div>
<img src="/img_here.jpg">
</div>
Then from there, you just need to style the bar. My example below has the progress bar locked to the bottom, and when you land on the page the progress bar will animate from the top down until it stops at the current percentage.
.progress{
position: relative;
width: 50px;
height: 200px;
}
.progress img{
width: 50px;
height: 200px;
position: absolute;
z-index: 1;
}
.progress .fillBar{
width: 50px;
bottom: 0;
height: 200px;
transition: height 0.3s ease-out;
}
thanks for assisting.
I'm having an issue in which my DIV class named box-2 is only applying itself to the title of the section, even though I closed it around the entire code. I'm very new to PHP, so I'm wondering if there is something I'm overlooking.
<div class="box-2 shadow">
<?php if (get_field('highlights')) { //Sub speciality ?>
<div itemprop="Restuarant Highlights">
<h3 class="content-title">Highlights</h3>
<ul>
<?php $terms = get_field('highlights'); ?>
<?php foreach ($terms as $term){ ?>
<li><div class="sl-highlights"><span class="icon-ok-circled"><?php echo $term->name; ?></span></div></li>
<?php } ?>
</ul>
</div>
</div>
<div class="clearboth"></div>
<?php } ?>
I need the box-2 class to be applied to everything, as it spaces out the entire section for me.
EDIT: This pulls the data from a taxonomy, and displays it like:
Bananas Apples Pears Lemons Grapes
Peaches Strawberrys
Here is the CSS:
.box-2 {
width: 100%;
border-top: 1px solid rgba(0,0,0,.05);
margin-bottom: 7px;
padding: 12px 0 3px 0;
}
.sl-highlights {
float: left;
margin-right: 4%;
font-size: 14px;
min-width: 135px;
line-height: 25px;
}
.content-title {
font-size: 18px;
color: #444;
padding-bottom: 9px;
font-weight: bold;
font-family: 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;
}
Thank you very much for any and all help!
Anytime you apply a float style to an element, you remove it from the normal document flow; basically, the element doesn't reserve the space it normally would. Since that's what normally defines the height of it's container, the container tends to collapse to the height of the next element that is in the normal flow.
In your case, since all of the elements that have content are floated, box-2 collapses to a zero height. If you want it to still contain the floated elements, add an overflow: auto; rule to .box-2.
You can simplify your markup a bit by eliminating the <div> elements that currently have the sl-highlights class and instead apply the class to the <li> elements. I'd probably add a display: block rule too, since technically it's invalid to have a block-level element (the <h3> tags) inside an inline element (the <li> element).
Sorry if this question has been asked a lot. I am currently working on a site that will have a custom gallery. Of all things to get stuck on right now, its the gallery page indicator.
On this page, the left portion will be made of a gallery of "galleries", displaying 6 galleries per "page". http://www.ct-social.com/ctsdev/aff/news-and-events/
Above the gallery are small blue dots that will serve as gallery indicators. The code to create the gallery indicators is as follows:
<?php for ($i=0; $i < $n2; $i++): ?>
<div class="event-gallery-unselected"></div>
<?php endfor; ?>
Upon loading I would like the left most dot to be given a different style that is attributed to class="event-gallery-selected". Upon clicking any other dot (except the current selection) the currently selected dot needs to revert back to "event-gallery-unselected" and the clicked dot takes on "event-gallery-selected"
I am kinda new to PHP, very new to JavaScript and JQuery. If using either of those languages as an example could you please breakdown your explanation? Thank you very much for all of your help.
Updated code:
CSS
.event-gallery.selected {
position: relative;
top: -0.7em;
background: white;
background-color: #1e93bb;
width: 20px;
height: 20px;
margin: 7px;
border-radius: 50%;
}
.event-gallery {
position: relative;
top: -1.1em;
background: white;
background-color: #63c5e7;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 7px;
float: right;
cursor: pointer;
}
Updated Code JS
<script type="text/javascript">
jQuery(document).ready(function($){
$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
</script>
Just got it working now.
I would suggest having a class which is present on all of your gallery div elements. This will allow the common styles to be maintained and also allow you to have only 1 click handler. You can then have a separate selected class which you toggle as needed. Try this:
<?php for ($i = 0; $i < $n2; $i++): ?>
<div class="event-gallery"></div>
<?php endfor; ?>
.event-gallery {
color: #000; /* default styling ... */
padding: 5px;
}
.event-gallery.selected {
color: #FFF; /* selected item styling ... */
background-color: #C00;
}
$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
Example fiddle
use jQuery like this:
$('divid').click(function(){
$('divid').css('background-image', 'pic2.jpeg');
});
for example
If you have a set of elements:
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I typically handle it as such:
var $items = $('#wrapper .item');
$('.item').click(function(){
$items.removeClass('active'); // 'reset' the active links
$(this).addClass('active'); // apply the active class to the clicked item
})
This can easily be done with a little bit of help from jQuery.
$(function() {
$(".even-gallery-unselected").on("click", function() {
this.removeClass("event-gallery-unselected")
.addClass("event-gallery-selected");
});
});