CODEWITHSUNDEEP
jquerymobile
TMA-1
TMA-1

Reputation: 131

Add header to jQuery mobile controlgroup

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?

Upvotes: 1

Views: 2584

Answers (1)

Jeemusu
Jeemusu

Reputation: 10533

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  
}

​

Upvotes: 2

Related Questions