large vertical white space between multiple HTML Content features

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
5/30/2013 10:43:54 AM
ABM
Gravatar
Total Posts 29

large vertical white space between multiple HTML Content features

I just released a new website to a client and they started creating their own pages and content. One page in particular has 3 HTML Content blocks in the center of the page. There is a large amount of white space separating each of the HTML Content blocks. I can't seem to reproduce this in any of my other sites. I'm assuming it has something to do with the skin but I don't know where to start troubleshooting it. I'm using the latest versions of Mojo and Artisteer. Any ideas are appreciated. The page in question is http://villageatminnechaug.com/new-page.aspx.

5/30/2013 12:09:46 PM
Gravatar
Total Posts 182
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: large vertical white space between multiple HTML Content features

The divs in question are all like this:

<div class="art-content clearfix" id="ctl00_mainContent_ctl00_pnlOuterWrap" style="height: 390px;">

That inline style that says "height: 390px" is what is giving you the issue. It's being added by some javascript. If you disable javascript you will see that the issue goes away.

I suggest looking through your script.js for what is adding the height, and removing it. This might break something else, but chances are there is another solution to fix whatever the height was added for.

Good luck.
-Isaac

5/30/2013 12:20:38 PM
Gravatar
Total Posts 182
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: large vertical white space between multiple HTML Content features

Actually I found it in your JS, it's on lines 298-314 of your script.js, but the specific line of the height addition is on line 312.

$(window).bind('resize', function () {
    var bh = $('body').height();
    var mh = 0;
    var c = $('div.art-content');
    c.removeAttr('style');
    $('#art-main').children().each(function() {
        if ($(this).css('position') !== 'absolute') {
            mh += $(this).outerHeight(true);
        }
    });
    if (mh < bh) { // Says if $('body').height() is less than each $("#art-main").children() height (if #art-main isn't position absolute), do stuff below
        var r = bh - mh; // defines the height to be added as $("body").height() minus the height of $("#art-main").children()
        c.css('height', (c.outerHeight(true) + r) + 'px'); // --- Adds the height to $("div.art-content")
    }
});

I'm not sure why they added the script, but you should consider removing it or making it more specific (you could use a body class, perhaps).
 

7/14/2013 11:51:59 PM
ABM
Gravatar
Total Posts 29

Re: large vertical white space between multiple HTML Content features

Isaac, thanks for the help. I'm new at CSS and you were a big help. I was able to dig a little further and figured out the intent of the resize function is to force the footer to the bottom of the page when the page (body) height was greater than the sum of all the modules under art-main. It incorrectly increased the height of each of the content modules where I think it should be increasing the height of the sheet. I changed the c variable assignment line to point to the sheet and it works like a charm. Thanks again for the help. I didn't know where to start and your comments made the code easier to understand. Here's what the code looks like now:

jQuery(function ($) {
    'use strict';
    $(window).bind('resize', function () {
        var bh = $('body').height();
        var mh = 0;
    var i = 0;
        //var c = $('div.art-content');
    //SB 7/15/13 adjust sheet height, not each content
    var c = $('div.art-sheet');
        c.removeAttr('style');

        $('#art-main').children().each(function() {
            if ($(this).css('position') !== 'absolute') {
                mh += $(this).outerHeight(true);
            }
        });
        
        if (mh < bh) {
            var r = bh - mh;
        c.css('height', (c.outerHeight(true) + r) + 'px');
        }
    });

    if ($.browser.msie && parseInt($.browser.version, 10) < 8) {
        $(window).bind('resize', function() {
            var c = $('div.art-content');
            var s = c.parent().children('.art-layout-cell:not(.art-content)');
            var w = 0;
            c.hide();
            s.each(function() { w += $(this).outerWidth(true); });
            c.w = c.parent().width(); c.css('width', c.w - w + 'px');
            c.show();
        });
    }

    $(window).trigger('resize');
});

 

3/29/2014 1:48:31 PM
ABM
Gravatar
Total Posts 29

Re: large vertical white space between multiple HTML Content features

I'm just closing up some loose ends. I'm assuming the logic that creates the script.js file generated by the Artisteer exporter belongs to MojoPortal. I noticed a new exporter for Artisteer 4.2 was released. Was this bug fixed or will I have to continue applying the fix for all new templates? 

Thanks!

3/29/2014 2:04:07 PM
Gravatar
Total Posts 18444

Re: large vertical white space between multiple HTML Content features

The javascript is generated by Artsiteer and it is part of the Artisteer design, it is not part of mojoPortal. The only thing our exporter plugin does is include it and we do some find and replace logic to rename some variables in that script that would otherwise conflict with the jquery ui slider plugin, ie they have an image slider named slider that conflicts with the slider plugin in jqueryui.

So if there is a bug in the script it is an Artisteer bug not a mojoPortal bug and it isn't something our plugin would ever fix, though it could possibly be fixed by Artisteer in a newer version.

The main job of our plugin is generating the layout.master file of the skin, other than that it just includes a theme.skin file which is the same for all Artisteer skins of a given version and includes the css and js files that Artisteer produces.

 

3/29/2014 2:30:44 PM
ABM
Gravatar
Total Posts 29

Re: large vertical white space between multiple HTML Content features

Wow, thanks for the fast response! Also, thanks for letting me know how the exporter works. I will send this back to Artisteer. Keep up the great work!
5/3/2014 1:45:15 AM
Gravatar
Total Posts 7

Re: large vertical white space between multiple HTML Content features

I just came in search of the answer to this question. FYI I checked the demo site and this happens in three of the default skins art42-blue, art42-bluepatch and art42-green.

You must sign in to post in the forums. This thread is closed to new posts.