Good point!

Never noticed that DEFAULT layout is actually wrapped by HTML TABLE markup?! This prevents a responsive behavior. If I would have used it in a real-world project, I would have opened a topic myself ;)

And alternative TABLE layout is boostrap spans only. But it is a vertical top-to-bottom layout. Maybe "TABLE" is an unfortunate wording? "VERTICAL LIST" or "ROWS" would describe it better.

Anyway, i think the default layout definitely needs some markup changes. Or at least a new full-responsive layout.

You can create alternative template. Copy layout and select it in group parameters. Then markup it with pure bootstrap CSS.

I have already created my own template. But I dont know how to do it integrated with bootstrap. Mine is a copy of yours with table. I think you are very busy nowadays :-) If you can put here a piece of code, I can integrate it to my own template. In any case, it would be nice if you can include it in one of the coming updates.

My template is here:
http://www.zestcoaching.com/gunluk-uygulamalar/hemen-alin.html

See bootsrap grid. You have 4 plans then

<div class="row-fluid">
    <div class="span3">
        Plan 1 here
    </div>
    <div class="span3">
        Plan 2 here
    </div>
    <div class="span3">
        Plan 3 here
    </div>
    <div class="span3">
        Plan 4 here
    </div>
</div>

After spending more than an hour for creating the bootstrap template, I realized that it has more issues than the current table structure. The well heights do not match etc. So I prefered to stay with the current table template. I can share the bootstrap template if needed.

hakana The well heights do not match etc.

FYI

Unfortunately a real drawback with floating DIV layouts. A common issue for years with hundreds of workarounds and solutions. In general there are 3 ways: CSS hacks/tricks, CSS3 new flexbox, or JavaScript

Examples & Solutions:

A.) CSS table table-cell

• "Yootheme" and others often use the CSS property display: table;, display: table-cell;
• Bootstrap3 article and example
• related link with misc CSS solutions

B.) CSS3 flexbox (supported in IE10+)

• Flexbox example on Bootply

C.) Misc JavaScripts to make equal height DIVs

• Related article
• matchHeight.js
• equalHeight.js

Hi Pepperstreet. Thank you very much for this nice info. I have tried some of these examples as well as some other ones which are not listed above. The codes work perfect, but when I add span3 to the column, I can never adjust the row height to the same level. When I delete span3, it works OK but then the width issue comes up. So I don't think that I can solve it by myself, maybe later. I have spent more than 6 hours to this and could not manage.

hakana The codes work perfect, but when I add span3 to the column, I can never adjust the row height to the same level.

That is why I used table.

Sergey

hakana The codes work perfect, but when I add span3 to the column, I can never adjust the row height to the same level.

That is why I used table.

Can you give some more details? Not sure if I got the idea and your problem. Maybe some screenshots? Or example template code?

I whated buttom be at the bottom. But it is always positioned acording to div height. And every plan has different height. Table helps me arrange price, desctiption and buttons.

This works well for the standart heights but the width becomes a problem in responsive layouts. (see below for the other code)

<style type="text/css">
    .row {display:table; width:100%; min-width:800px; border-spacing:10px; }
    .col-md-3 {display:table-cell; width:25%;}
</style>

<div class="row">
    <div class="col-md-3 well">
        <a href="#">
        <div class="inner" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 well">
        <a href="#">
            <div class="inner" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperisdiuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 well">
        <a href="#">
            <div class="inner" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 well">
        <a href="#">
            <div class="inner" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>

This looks more responsive but the heights are not standart:

<div class="row-fluid">
    <div class="col-md-3 well span3">
        <a href="#">
        <div class="inner" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 well span3">
        <a href="#">
            <div class="inner" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperisdiuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 well span3">
        <a href="#">
            <div class="inner" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 well span3">
        <a href="#">
            <div class="inner" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>

Do not even ask me :). If i'd know how to make it right, that would be the default template.

Hi Sergey,

You made me laugh. I am posting this because pepperstreet asked me to do so. I already gave up :-)

hakana I am posting this because pepperstreet asked me to do so.

:) if there is some free time, I will give it a try! Didn't work with Emerald on template level, yet. That's why I did not notice the "issue" earlier.

Just create two html files named default_list_template1.php default_list_template2.php

upload them to: components/com_emerald/views/emlist/tmpl

From the emerald payment groups, assign one of them to a group, see the payment page, then assign the other one. You can easily see the difference :-)

It will not take more than 5 minutes. :-)

pepperstreet Anyway, i think the default layout definitely needs some markup changes. Or at least a new full-responsive layout.

additional solution

Current DEFAULT LAYOUT might get additional CSS like it is found in Bootstrap v3. There is a special class table-responsive ... plus some additional styles. At least this can make tables "scrollable" and "viewable" in horizontal direction.

.table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd
    }
... some more styles following here. See BS v3 demo site ...

2018 ;)

Now we might use CSS FLEXBOX and CSS GRID ...

pepperstreet

2018 ;)

Now we might use CSS FLEXBOX and CSS GRID ...

Yep, those are excellent tещщдыюhope Joomla will use it.