span12 Causing Issue in Blog Display

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
webdevtim
Joomla! Intern
Joomla! Intern
Posts: 76
Joined: Sun May 28, 2017 4:37 am

span12 Causing Issue in Blog Display

Post by webdevtim » Sat Sep 08, 2018 1:17 am

This is what the HTML looks

Code: Select all

<div class="span12">
 <div class="item column-1" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
	<div class="page-header">
		<h2 itemprop="name"><a href="/lc4911-dev/news/press-and-media/lawyers-and-9-11-family-members-file-petition-for-grand-jury-investigation-into-9-11-attacks.html" itemprop="url">Lawyers and 9/11 Family Members File Petition for Grand Jury Investigation into 9/11 Attacks</a></h2>
	</div>
	…
 </div>
 …
</div>
This is what the PHP looks like

Code: Select all

<?php if (!empty($this->intro_items)) : ?>
 <?php foreach ($this->intro_items as $key => &$item) : ?>
  <?php $rowcount = ((int) $key % (int) $this->columns) + 1; ?>
  <?php if ($rowcount === 1) : ?>
   <?php $row = $counter / $this->columns; ?>
   <div class="items-row cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row-fluid clearfix">
   <?php endif; ?>
    <div class="span<?php echo round(12 / $this->columns); ?>">
     <div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting"><?php	$this->item = &$item;	echo $this->loadTemplate('item');	?>
	  </div>
   <!-- end item -->
    <?php $counter++; ?>
   </div><!-- end span -->
  <?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>
  </div>
  <!-- end row -->
  <?php endif; ?>
 <?php endforeach; ?>
<?php endif; ?>
The problem is:

Code: Select all

<div class="span<?php echo round(12 / $this->columns); ?>">
So what is happening is that the <div class="span12"> is causing an additional left hand margin that is pushing things to the right and I need to get rid of it without deleting

Code: Select all

<?php echo round(12 / $this->columns); ?>
As you can see for the container div class="item column-1", The divisor in the PHP is $this->columns. So the problem would appear that the main content is designated 1 column, 12 divided by one, leaving class="span12" as the result. Any span here, however, is going to introduce an additional margin because of the base Protostar template I am using. Perhaps the only solution is a CSS solution.
Protostar CSS

Code: Select all

.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 28px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 1.063829787%;
  *margin-left: 2.0744680846383%;
}
Can I solve this using the Joomla interface?? Or is the CSS solution the only solution??

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 24955
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: span12 Causing Issue in Blog Display

Post by Per Yngve Berg » Sat Sep 08, 2018 8:02 am

Mod. Note: Relocated the topic to the Templates Forum.

You don't show any modules at the sides of the content area (position-7, position-8)?

webdevtim
Joomla! Intern
Joomla! Intern
Posts: 76
Joined: Sun May 28, 2017 4:37 am

Re: span12 Causing Issue in Blog Display

Post by webdevtim » Fri Sep 14, 2018 5:55 pm

Thanks for the response Per.

There is no position-7 or position-8, I renamed those right-panel and left-panel respectively.

I solved the problem with CSS. I just set the specific blog content divs left margin to 0:

Code: Select all

.lc4911-content .blog .items-row div {
    margin-left: 0;
}
and left it at that.

One day I will rebuild the template from scratch using CSS flex box and do away with a lot of the Bootstrap stuff, where I can get away with it. I realize I can't completely get away from Bootstrap, because all the components, modules and plugins from the Joomla Extensions directory depend on it.

For now, however, I am happy with the CSS solution and the Bootstrap "span-X" classes. I use flex box where I can and Bootstrap span-x classes where I can't.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 24955
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: span12 Causing Issue in Blog Display

Post by Per Yngve Berg » Fri Sep 14, 2018 6:55 pm

Joomla 4.0 will ship with Bootstrap 4.

User avatar
john-doe
Joomla! Explorer
Joomla! Explorer
Posts: 439
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia

Re: span12 Causing Issue in Blog Display

Post by john-doe » Thu Sep 20, 2018 10:06 pm

Per Yngve Berg wrote:
Fri Sep 14, 2018 6:55 pm
Joomla 4.0 will ship with Bootstrap 4.
Horray! :)
www.aldemar-hernandez.com - Custom templates and design services.

webdevtim
Joomla! Intern
Joomla! Intern
Posts: 76
Joined: Sun May 28, 2017 4:37 am

Re: span12 Causing Issue in Blog Display

Post by webdevtim » Tue Oct 16, 2018 9:11 pm

I created an incredible layout using CSS Grids. I mean I can't see using the Bootstrap Grid and Bootstrap span classes any more. Between CSS Grids and Flexbox Elements, I don't see anything I can't do from a layout perspective.

I will attach a little layout experiment I did. Let me know what you think.
grid-test.zip
You do not have the required permissions to view the files attached to this post.

webdevtim
Joomla! Intern
Joomla! Intern
Posts: 76
Joined: Sun May 28, 2017 4:37 am

Re: span12 Causing Issue in Blog Display

Post by webdevtim » Fri Oct 19, 2018 4:53 pm

I guess this crowd loves Bootstrap.

webdevtim
Joomla! Intern
Joomla! Intern
Posts: 76
Joined: Sun May 28, 2017 4:37 am

Re: span12 Causing Issue in Blog Display

Post by webdevtim » Sat Oct 20, 2018 1:33 am

I got my answer to this question. We will be using both CSS Grids and Bootstrap 4.x classes.

See: https://www.joomlashack.com/blog/joomla-news/css-grid/

webdevtim
Joomla! Intern
Joomla! Intern
Posts: 76
Joined: Sun May 28, 2017 4:37 am

Re: span12 Causing Issue in Blog Display

Post by webdevtim » Mon Oct 29, 2018 9:14 pm

Fotis Evangelou had this to say:

My belief is that Bootstrap is a good choice, for many reasons. CSS grids (and Flexbox) are nice but to be easily defined in HTML structures, you still need to augment CSS properties into class names. Think of how BootStrap does grids right now. This is really handy.

I also think that the plan for BootStrap is to eventually support CSS Grids for layout/structure while offering a fallback for older browsers or browsers that don't fully support the Grid & Flex specs yet.

Additionally, if I were to choose JS libs to be included from 3rd parties, I would definitely use jQuery 3.x, BootStrap v4 (they are not related to Twitter anymore BTW) and perhaps Vue.js as essential libraries to make developers' and integrators' lives easier. Otherwise we'll end up with dozens of libraries (even same but with different versions) being loaded into the Joomla front-end or back-end. It's not a bad thing utilizing proven/successful 3rd party projects in Joomla.

And I wouldn't worry about performance. As server's move to HTTP/2, it doesn't matter if you have 100 CSS/JS scripts. The protocol works differently than HTTP 1.1 and the browser bundles these files and downloads them much more intelligently and more efficiently. Not to mention a few extra KBs won't hurt anyone...


Post Reply

Return to “Templates for Joomla! 3.x”