search

modxcms / fred

The friendly front-end editor for visual, drag-and-drop content building in MODX CMS
https://fred.modx.com
MIT License
59 stars 25 forks source link

Bootstrap column width not displaying correctly while Fred active. #218

Closed muzzwood closed 5 years ago

muzzwood commented 5 years ago

Hi! I found a weird behaviour - I'm using the Fred 1.1 beta but this might also apply to earlier versions. I'm attempting to put together a vanilla Bootstrap 4 theme to help people get started with Fred. See the transport package attached. fredbootstrap-0.1.0-alpha.transport.zip

Currently there are only two elements that exist: grid-row and grid-col.

Try placing a grid-col within the grid-row's dropzone and it will appear very thin ignoring it's col-12 class while Fred is active. Load the page without Fred and it appears as it should.

See screenshot: Screenshot_2019-05-15 Home - MODX Revolution

In the screenshot, the rendered HTML is:

<div class="container">
    <div class="row" style="min-height:100px; background-color:#957bbe;">
        <div class="col-12 col-md-4" style="min-height:100px; background-color:#80bdff;">
        </div>
    </div>
</div>

As you can see it shouldn't be appearing as that thin.

theboxer commented 5 years ago

Try adding this attribute on your col element: data-fred-block-class="col-12 col-md-4"

muzzwood commented 5 years ago

Boom! Fixed. Thanks, I didn't know about that one!