Forums

strange 15px righ margin when using fluid layout

Permalink
hello community

we work with release 5.7.5.1 in a customized "Elemental" theme.

i have a main area fluid and try to add a predefined bootstrap layout, e.g. 7-3-2 columns.
that all works fine but adding such a layout adds a weird extra 15 pixels to the right,
causing a unwanted horizontal scrollbar in the browser window.

i could not find where to change that.

my php for the area looks like this:
<?php
$a = new Area('Main');
$a->setAreaGridMaximumColumns(12);
$a->display($c);
?>

my preset in page_theme.php looks like this:
public function getThemeAreaLayoutPresets()
    {
        $presets = array(
            array(
                'handle' => 'mg_7-3-2',
                'name' => 'mg_7-3-2',
                'container' => '<div class="row"></div>',
                'columns' => array(
                    '<div class="col-sm-7"</div>',
                    '<div class="col-sm-3 col-xs-9"</div>',
                    '<div class="col-sm-2"</div>'
                ),
            )
        );
        return $presets;
Viewing 15 lines of 16 lines. View entire code block.


ThemeProviderInterface is properly included.


any ideas what could be wrong?
thanks.
blink
blinkdesign
 
WillemAnchor replied on at Permalink Reply
WillemAnchor
try to add
$a->enableGridContainer();
blinkdesign replied on at Permalink Reply
blinkdesign
thanks, i tried, but no change.

i added it before and after:
$a->setAreaGridMaximumColumns(12);

it exactly the scrollbar size of 15 pixels.
WillemAnchor replied on at Permalink Reply
WillemAnchor
Maybe you can provide an URL so we can see context and css
blinkdesign replied on at Permalink Reply
blinkdesign
hi,
it's on
http://marcoganz.ch/cms/index.php/snaporaz...
i created a couple possible layouts for this client. on this page i use this fluid layout.
apparently it has nothing to do with the class affix i added.

thanks for your time.
WillemAnchor replied on at Permalink Best Answer Reply
WillemAnchor
I'm missing a container class in main (I guess mg-container is generated, but doesn't seem to do anything)

After playing a bit on the generated page with firebug, I changed the div right after main to:
<div class="ccm-custom-style-mainwide mg-container container" style="width:100%">

That seems to give the proper result.

Somewhere with the side-wide container its going wrong i guess.
Maybe even a rule like: .mg-container { width: 100% } would work, but I didn't test that.

Good luck !
blinkdesign replied on at Permalink Reply
blinkdesign
thanks a lot for your help. i cannot test anything 'cause i'm away till next week.
i'll test soon and get back.
blink
blinkdesign replied on at Permalink Reply
blinkdesign
hi willemanchor
i changed the setup of the areas, using simply a DIV container-fluid. it does the trick. thanks for pointing me to the right direction.
blink.
<div class="container-fluid">
        <div class="row">
            <div class="col-sm-10 col-content">
                <?php
                $a = new GlobalArea('Main');
                $a->setAreaGridMaximumColumns(10);
                $a->display();
                ?>
            </div>
            <div class="col-sm-2 col-sidebar">
                <?php
                $a = new GlobalArea('Sidebar');
                $a->display();
                $a = new Area('Sidebar Footer');
                $a->display($c);
Viewing 15 lines of 18 lines. View entire code block.