[Resolved] Grid/View/Layout expands beyond available content area. What am I doing wrong?

[Author]

Posts

[joe-enteleos]

I'm doing a simple thing, using Layouts to show post title, featured image, and a list of child posts. I've created a couple different views for the child posts, using the Loop Wizard to create a Grid layout, no changes to the code. One is a single column, while the other is three columns.

In both cases, the width on the front end expands beyond the content area of the post. I've attached some screen shots showing the layout editor and what shows on the front end. Here is the Views code:

[wpv-layout-start]
    [wpv-items-found]
        <!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class=" ">
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in State Group list of states"]</div>
		[wpv-item index=2]
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in State Group list of states"]</div>
		[wpv-item index=3]
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in State Group list of states"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-4"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-4"></div>
		</div>
	</wpv-loop>
	</div>
	<!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

Can you tell me what might be the problem?

Here is the page: hidden link

Oh, and by the way. The Layouts row is set to "Row as wide as post content."

[Luo Yang]

Hello,

Please try to modify this line from:

<div class="container wpv-loop js-wpv-loop">

To:

<div class="container-fluid  wpv-loop js-wpv-loop">

from:

<div class=" ">

To:

<div class="row">

See screenshot: container.JPG

More help:
hidden link
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.

[joe-enteleos]

Thank you Luo,

Yes, that does fix the problem. Can you say why the Views loop wizard makes the empty class declaration for the row div? Is that a bug, or is it by design? Should I be on the lookout for that in all code produced by the loop wizard?

Also, is there an option in the Views loop wizard to choose the fluid container? Or is there an option I missed in Layouts? Or is setting a fluid container something that must always be done manually?

Thank you for any further clarification.

Joe

[Luo Yang]

Dear Joe,

Q1) empty class declaration for the row div,

It is a known issue, see the errata here:
https://toolset.com/errata/view-loop-output-bootstrap-grid-missing-div-and-class/

Q2) container-fluid, there isn't such a built-in feature within Layouts plugin, and it is already in our feature request list:
https://toolset.com/feature-request/allow-to-alter-the-div-class-and-id-generated-by-layouts-i-e-container-and-container-fluid/

I suggest place your vote on it
https://toolset.com/feature-request/?wpv_post_search=container-fluid&wpv_view_count=686737

[joe-enteleos]

Great. I've added my vote. And thank you for the extra info on the bug, I look forward to the update.