New bootstrap with old Alloy gives block rendering problems

Vote:
 

We are working on a project for which we are reusing old code (built on Alloy for EPiServer 7 with MVC). For this new project we have received html with css built on bootstrap 3 from a designer.

Our problem is that the block rendering (with balancing) is not working as it did with css built on older bootstrap. We have tried different approaches but without success... Is there anyone out there who has been through the same and solved it somehow?

#80321
Jan 20, 2014 19:50
Vote:
 

The issue is in v2 and v3 changes in Bootstrap library. Bootstrap v3 has fluid layout (grid system for mobile, tablet, desktop and super duper screens). What we dd was to make changes in ContentArea renderer to add necessary styles for various screen sizes based on some kind of logic. The logic currently is hardcoded - but it can follow predefined rule-set, e.g., col-lg-X, col-md-Y. It means that if block takes X part of the screen on large desktops, it may take only Y on medium screen (tablets), etc. So it really depeds case by case.

Maybe you can provide more details about the issue then could be more precise and not flying around :)

#80322
Jan 20, 2014 22:06
Vote:
 

Thanks for your answer!

I will give you some code examples:

Here is a page that has 2 columns for blocks:

<div class="content">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-8">
                @Html.PropertyFor(m => m.CurrentPage.BlockLeftColumnBlock, new { Tag = "span8" })
            </div>
            <div id="sidebar-right" class="col-md-4 sidebar hidden-print">
                @Html.PropertyFor(m => m.CurrentPage.BlockRightColumnBlock, new { Tag = "span4" })
            </div>
        </div>
    </div>
</div>

    

When put in some dummy block into these 2 content areas then we get following html:

<div class="content">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="block linkblock span4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Test 1</h3>
                        </div>
                        <ul class="nav nav-list">
                            <li><a href="#">Test 1</a></li>
                        </ul>
                    </div>
                </div>
                <div class="block linkblock span4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Test 2</h3>
                        </div>
                        <ul class="nav nav-list">
                            <li><a href="#">Test 2</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="sidebar-right" class="col-md-4 sidebar hidden-print">
                <div class="block linkblock span4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Test 3</h3>
                        </div>
                        <ul class="nav nav-list">
                            <li><a href="#">Test 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    

The left content area will get the 2 blocks in 2 rows instead of 1... And for those blocks that have an alternative wide view we only get the narrow version... The way we have registered the wider version in our TemplateCoordinator.cs is like this:

viewTemplateModelRegistrator.Add(typeof(CalendarReaderBlock), new TemplateModel
{
    Name = "CalendarReaderBlockWide",
    Tags = new[] { "span8", "span12" },
    AvailableWithoutTag = false,
    Path = BlockPath("CalendarReaderBlockWide.cshtml")
});

    

As you can see we use "spanX" instead of "col-md-X" but we have actually replaced every occurance of spanX with col-md-X where found in the readable code (maybe there is more in some dll's?) and tried witout success (and with some weird results...)

So the main issue is that we don't get any balanced result... In the content areas where 2 blocks should render side by side on the same row, these are actually rendered on two different rows... And also we have problem with the content area using the standard (narrow) version instead of the wider version...

All the code that is used for balancing and content area rendering is standard alloy which we haven't edited.

Any ideas?

#80329
Edited, Jan 21, 2014 8:56
Vote:
 

I would start by being absolutely 100% sure that all instances of spanX are replaced by col-md-X. spanX is obsolete in bootstrap 3 and will not work. There are no spanX in the dlls, as it is used only in the Alloy Templates.

An easy way to find these is by using the regular expression option in the VS search

http://screencast.com/t/GFjQIH105Sub

#80331
Edited, Jan 21, 2014 9:59
Vote:
 
#81178
Feb 11, 2014 10:33
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.