Add header to jQuery mobile controlgroup

Question

I want to add a header to a controlgroup in jQuery mobile. My desired output is the same as what you can see on the jQuery mobile Theme Roller page, an example of which should appear below (http://jquerymobile.com/themeroller/)

enter image description here

As you can see, there is a controlgroup, with a header on top. Looking at the DOM of the theme roller page, they've added list item element before the input/label pairs of the controlgroup.

I can insert the marked up list item into my controlgroup (as in, the HTML that JQM generates), but it rounds the corners of the first control item by default - hardly noticeable since the background colour goes to the edges, but noticeable nonetheless:

enter image description here

So, ideally, I'd love to just know if there is an easy way to add the header and have jQuery do it's magic to make it look like it's supposed to.

Here is the code I've tried, which produces the second example above. Note that it's using backbone & underscore hence the variable substitution:

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="vertical">
            <li data-swatch="a" class="ui-li ui-li-divider ui-btn ui-bar-a ui-corner-top ui-btn-up-undefined" data-role="list-divider" data-form="ui-bar-a">Apprentice/Trainee Role</li>
            <% for ( var i in area_template.roles ) {
                var role = area_template.roles[i];
            %>
                <input name="checkbox_<%= role.id %>" id="checkbox_<%= role.id %>" type="checkbox">
                <label for="checkbox_<%= role.id %>"><%= role.name %></label>
            <% } %>
        </fieldset>
    </div>

EDIT: Thanks for your work and suggestion Jeemusu. I still get the corners showing. I will paste the differences between the generated code from your fiddle page, and the generated code from my app. I can only predict it might have something to do with fiddle using JQM 1.0.1, and my app using JQM 1.1.1. I tried retrofitting 1.0.1. and there were too many errors.

EDIT AGAIN: I just removed a whole lot of pasted code, because I realised on jsFiddle I can just switch to jQuery 1.7.2, which allows me to switch to jQm 1.1.1, and when I run your code on fiddle, the corners appear. Albeit, they appear in the code, but can barely be seen due to the lighter colours used. But you can definitely see the difference in the DOM between using the two different libraries. Perhaps this indicates a bug in 1.1.1?

I imagine that those form elements are actually inside a list, and that jquery mobile converts them into divs to do it's hokey pokey. Take a look at this page of the API , it might give you point in the right direction. Documentation says add data-role="list-divider" as an attribute of the first <li> item. — Jeemusu
– Jeemusu, Commented Aug 2, 2012 at 2:26
I already tried putting them in a listview item, and the individual compontents into list items - no matter which way I tried, the part of the generation that turns and input & a label into a button overrides the fact that it's in a list, and thus draws them as individual buttons rather than in a group. — TMA-1
– TMA-1, Commented Aug 2, 2012 at 3:00
jsfiddle.net/3txqn/3 <--- take a look at this jsfiddle I made. Might help you find what your looking for. Reposted, the comment as I stripped down the syntax to the bare minimum. — Jeemusu
– Jeemusu, Commented Aug 2, 2012 at 3:55
You right, they do appear, even in 1.0.1, but due to the theme being a lighter color they don't show. Your only option may be to use a css hack to remove them. I've added in a css style you can use in this updated jsfiddle — Jeemusu
– Jeemusu, Commented Aug 2, 2012 at 7:44

Jeemusu · Accepted Answer · 2012-08-03 01:15:55Z

2

I ripped the control group out of the theme editor and stripped it down to it's bare minimum markup. You can find the result in this jsfiddle. I also included the code you have in the question, as you can see our code isn't too different. Hopefully this will help point you in the right direction.

Looking at your code you have some unnecessary markup, for example:

<div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="vertical">

The above code doesn't need the <div data-role="fieldcontain">, this will be automatically built by jquerymobile and wrapped around any <fieldset>.

UPDATE

It would appear that the rounded corners on the first item in the control group can't be seen in my example above due to the default theme using very light colours. Your only option may be to use a css hack to remove them by targeting the .ui-btn-inner class. I've added the css into this updated jsfiddle. The CSS in question is this:

.ui-btn-inner {
    border-top: none !important;  // Use to remove borders all together 
    border-radius: 0 !important;  // Use this to remove the radius  
}

edited Aug 3, 2012 at 1:15

answered Aug 2, 2012 at 3:59

Jeemusu

10.5k3 gold badges46 silver badges68 bronze badges

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

3 Comments

TMA-1 Over a year ago

Thanks for your response. I will edit my question with the results.

Jeemusu Over a year ago

Any luck? I updated my answer with a new jsfiddle that shows how you can remove the borders with css.

TMA-1 Over a year ago

Thanks, I targeted the control groups with ID then the .ui-btn-inner within, that did the trick. It also removed a faint border from the other items, but it's less noticeable in it's absence than the rounded corners being present beforehand.

Collectives™ on Stack Overflow

Add header to jQuery mobile controlgroup

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related