hakana VIP
Total posts: 422
21 Jul 2014 12:51

You can check how it looks on a mobile phone or on a tablet on this page:
http://www.mintjoomla.com/my-account/new-subscription.html

It looks the same on my site as well even although the templates are different. The wells dont fit the screen. What is the best way to put the wells from top to bottom instead of inline? maybe the template code needs some modificaton here.

Last Modified: 08 Oct 2018


pepperstreet VIP
Total posts: 3,833
21 Jul 2014 17:34

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.


Sergey
Total posts: 13,730
22 Jul 2014 11:21

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


hakana VIP
Total posts: 422
22 Jul 2014 11:28

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


Sergey
Total posts: 13,730
22 Jul 2014 12:15

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>

hakana VIP
Total posts: 422
22 Jul 2014 15:27

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.


pepperstreet VIP
Total posts: 3,833
23 Jul 2014 18:09

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+)

C.) Misc JavaScripts to make equal height DIVs


hakana VIP
Total posts: 422
23 Jul 2014 21:46

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.


Sergey
Total posts: 13,730
24 Jul 2014 00:15

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.


pepperstreet VIP
Total posts: 3,833
24 Jul 2014 02:30

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?


Sergey
Total posts: 13,730
24 Jul 2014 03:22

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.


hakana VIP
Total posts: 422
24 Jul 2014 10:13

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>

Sergey
Total posts: 13,730
24 Jul 2014 14:09

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


hakana VIP
Total posts: 422
24 Jul 2014 16:12

Hi Sergey,

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


pepperstreet VIP
Total posts: 3,833
24 Jul 2014 16:23

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.


hakana VIP
Total posts: 422
24 Jul 2014 17:31

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 VIP
Total posts: 3,833
31 Jul 2014 02:23

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 ...


pepperstreet VIP
Total posts: 3,833
04 Oct 2018 01:33

2018 ;)

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


Sergey
Total posts: 13,730
08 Oct 2018 06:54

pepperstreet

2018 ;)

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

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

Replay Topic
Uploading
Click here to upload and insert file from you hard drive: (png, gif, jpg, jpeg, zip, txt, rar)
Powered by Cobalt