[Solved] Nested Columns Code

[jagipson+ 10]

@Andrew @Simon

 

I was wondering on your old documentation for DMS you supply the code for a Nested Column:

1. <div class="row">
2. <div class="span4">4</div>
3. <div class="span8">8
4. <div class="row-fluid">
5. <div class="span6 zmb">6</div>
6. <div class="span6 zmb">6</div>
7. </div>
8. </div>
9. </div>

You don't explain how to do this in Platform 5 Besides <div class="row"> </div>

Whats the appropriate code for a nested section in Platform 5.

[Aires 265]

I hope this will assist you https://www.pagelines.com/developer/css-components/

[jagipson+ 10]

This shows the grid code:

The basic grid system consists of a 12-column grid. To employ it simply wrap the columns in a div with class of pl-row.

Never explains how to add a nested column.

 

@Aires

[Ray 15]

It does right after:

Here's code with those classes applied:  

<div class="pl-row">
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
</div>

 

[jagipson+ 10]

@Ray

@Simon 

@Andrew @Danny

I want a NESTED Column

Completely understand how to make a 4 column, but it never shows how to add a nested column.

<div class="pl-row">

This is wrapped in a 6 column and it has 2 columns inside
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>

Stops here

  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
</div>

 

DMS 2 you supply the code and it looks like this:

1. <div class="row">
2. <div class="span4">4</div>
3. <div class="span8">8
4. <div class="row-fluid">
5. <div class="span6 zmb">6</div>
6. <div class="span6 zmb">6</div>
7. </div>
8. </div>
9. </div>

SEE ATTACHEMENT I WANT A NESTED COLUMN 

[jagipson+ 10]

@Simon @Andrew @Danny

[Ray 15]

Here's the same DMS sample code but with platform 5 classes:

 

<div class="pl-row">
  <div class="pl-col-xs-4">4</div>
  <div class="pl-col-xs-8">8
    <div class="pl-row">
      <div class="pl-col-xs-6">6</div>
      <div class="pl-col-xs-6">6</div>
    </div>
  </div>
</div>

 

[jagipson+ 10]

Thats the code I thought was correct. See link below with your code:

https://matts-development-jeffgipson.c9users.io/page-layouts

There is no css on the site. Only way to get this to have no gap is to remove the following:

<div class="pl-row" style="color: white;">
  <div class="pl-col-xs-4" style="background: red;">4</div>
  <div class="pl-col-xs-8" style="background: blue">8
    <div class="pl-row">
      <div class="pl-col-xs-6" style="background: yellow;">6</div>
      <div class="pl-col-xs-6" style="background: teal;">BIG CAP ON RIGHT????</div>
    </div>
  </div>
</div>

OVERRIDE STYLES

<div class="pl-row" style="color: white; margin: 0;">
  <div class="pl-col-xs-4" style="background: red;">4</div>
  <div class="pl-col-xs-8" style="background: blue; padding: 0;">8
    <div class="pl-row" style="margin: 0;">
      <div class="pl-col-xs-6" style="background: yellow; padding: 0;">6</div>
      <div class="pl-col-xs-6" style="background: teal; padding: 0;">No Cap Now...</div>
    </div>
  </div>
</div>

 

You have to remove the margin of the row and the padding of each column. Or is that wrong?

 

@Ray @Simon @Andrew

[Ray 15]

•  
• This should get rid of the right in margin nested columns  

[class*='pl-col-'] > div {
	max-width: none;
}

• as for the padding/margin issues, I recommend adding custom classes to handle this

.nopadding{
	padding: 0!important;
}

.nomargin{
	margin: 0!important;
}

 

Will look into implementing something more versatile for platform.

[jagipson+ 10]

Sounds good. I had this code before but wasn't sure if you had something in the system that automatically changed everything and I was just missing it. 

 

Thanks for the help.

 

Matt

@Ray