MiniK2 Fixed Height on UL#stage Prevents Responsive Display of Items.

MiniK2 sets the pixel height to the UL#stage element as inline CSS using javascript.

My Setup:
In my bootstrap responsive template, I have 2 rows of 3 thumbnails. (I am using thumbnails only, no other options are activated to display anything).

The Problem: Responsiveness.
Everything works very responsively until the page width shrinks to a point where it displays only 2 thumbnails per row. At that point, the #stage UL parent's declared inline CSS height stays fixed, so that it cuts off two of the 6 items that have wrapped down as a result of the narrowing of the UL.

Where thumbnails are represented by X, my display should be:

X X
X X
X X

But due to the fixed original height of the UL #stage, it produces:

X X
X X

+++++++++++++++++++++++++++++++++++++++++++++++++++

The solution should be to prevent the miniK2 JS from applying an inline height (which is undesirable for responsive layouts).

How do I correct this so that all miniK2 items will display as intended in a narrow (responsive) screen width?
11 years 8 months ago #1 by something123

Please Log in or Create an account to join the conversation.

Hello

sorry which layout of MiniK2 that you're using?
Just FYI, miniK2 still doesn't have a responsive layout feature yet up until now...
11 years 8 months ago #2 by erwinschro

Please Log in or Create an account to join the conversation.

Thanks for the quick reply. Select sub-template = Portfolio.

For your convenience, the module output is provided below (from my local xampp server installation of Joomla):
<div class="moduletable">
					<div class="clr"></div><div class="mod_pad">
<div id="filter"><span>Filter by</span><a href="#" class="active">All</a><a href="#">OSU Models - Femme</a></div>
 
<div id="folio-container">
 
    <ul style="height: 370px;" id="stage"><li data-type="OSU Models - Femme" data-id="0">
            <a href="/osumodels.com/index.php/2011-12-21-11-51-15/k2-item">
                <img style="height:185px; width:190px" alt="Tyra Banks" src="/osumodels.com/images/minik2/6c0507716e2ffd08466d4ae960e7eaca.jpg">
 
                <div class="description">
                    <h3>Tyra Banks</h3>
                    <p></p>
                </div>
            </a>
        </li><li data-type="OSU Models - Femme" data-id="1">
            <a href="/osumodels.com/index.php/lara-stone">
                <img style="height:185px; width:190px" alt="Lara Stone" src="/osumodels.com/images/minik2/e17041a753ae5f14d3c37726bb8062f1.jpg">
 
                <div class="description">
                    <h3>Lara Stone</h3>
                    <p></p>
                </div>
            </a>
        </li><li data-type="OSU Models - Femme" data-id="2">
            <a href="/osumodels.com/index.php/kate-upton">
                <img style="height:185px; width:190px" alt="Kate Upton" src="/osumodels.com/images/minik2/6205435f7b2607833f2741943e5c576e.jpg">
 
                <div class="description">
                    <h3>Kate Upton</h3>
                    <p></p>
                </div>
            </a>
        </li><li data-type="OSU Models - Femme" data-id="3">
            <a href="/osumodels.com/index.php/julia-saner">
                <img style="height:185px; width:190px" alt="Julia Saner" src="/osumodels.com/images/minik2/18d11bc7b5e2db07bf797b8ca600ecba.jpg">
 
                <div class="description">
                    <h3>Julia Saner</h3>
                    <p></p>
                </div>
            </a>
        </li><li data-type="OSU Models - Femme" data-id="4">
            <a href="/osumodels.com/index.php/iselin-steiro">
                <img style="height:185px; width:190px" alt="Iselin Steiro" src="/osumodels.com/images/minik2/2fd710b5ff708ebfdf932b6e574b53b1.jpg">
 
                <div class="description">
                    <h3>Iselin Steiro</h3>
                    <p></p>
                </div>
            </a>
        </li><li data-type="OSU Models - Femme" data-id="5">
            <a href="/osumodels.com/index.php/carolyn-murphy">
                <img style="height:185px; width:190px" alt="Carolyn Murphy" src="/osumodels.com/images/minik2/b60200e17afbdfc9e81484766b981327.jpg">
 
                <div class="description">
                    <h3>Carolyn Murphy</h3>
                    <p></p>
                </div>
            </a>
        </li>          
 
 
        </ul>
</div>
 
<!-- MiniK2 Joomla 3.0 module - Another Quality Freebie from TemplatePlazza.com --></div>
		</div>
11 years 8 months ago #3 by something123

Please Log in or Create an account to join the conversation.

By the way, I just tested the other layouts, and they seem to work fine responsively. The problem only arises for me with the portfolio layout. Love the module, and thanks for this great contribution to the Joomla Community.
11 years 8 months ago #4 by something123

Please Log in or Create an account to join the conversation.

Hi, the height value is generated by quicksand.js and I have idea how to remove it unless you edit the js. Maybe you can try to add yourself a hardcoded value by using mediaqueries but I'm not sure this will work too
11 years 8 months ago #5 by andy

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum