jquery mobile external panel not taking on styling

Question

I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?

<script id="panel-init">
        $(function () {
            $("body > [data-role='panel']").panel();

        });
    </script>

<div data-role="panel" id="app-menu" data-display="push" data-position="left">
        <ul data-role="listview">
            <li data-role="list-divider">Menu</li>
            <li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>

        </ul>
    </div>

Omar · Accepted Answer · 2014-03-20 09:10:19Z

39

Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.

jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.

$(function () {
  $("[data-role=panel]").panel().enhanceWithin();
});

Demo

edited Mar 20, 2014 at 9:10

answered Dec 5, 2013 at 8:43

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Hollas Over a year ago

that did the trick. thanks! I often wonder how people know these things. In this case even the demo on jQeryMobile site does not use this method when they create external panels and there is a fully styled button inside. Thanks again!

Omar Over a year ago

@MarkHollas you're right, it's not explained on jQM demo page. Not even that .enhanceWithin() replaces .trigger("create").

Phill Healey Over a year ago

It is actually on the demo somewhere, hidden, deep, in a cave. Trouble with JQM docs is there seems to 2 or 3 versions for every code base and each tells it in a different way. Its def in the latest docs though. That's where I found it and recently discuss it with @Omar. But JQM docs leave a lot to be .enhance within()

user3344434 · Accepted Answer · 2015-12-22 20:05:32Z

I'm not allowed to comment but in the demo @Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.

With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors

<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Anchor</a>

adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.

Collectives™ on Stack Overflow

jquery mobile external panel not taking on styling

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related