Legend tag contain text aligned left in JQuery mobile?

Question

Does anybody have idea why <legend> tag is not centering in the JQuery mobile ? For example I tried following code.

<fieldset data-role="controlgroup" data-type="horizontal" data-theme="a">
                <legend>I would this site.<legend>
                <input type="radio" name="radio-choice-2-6" id="radio-choice-1-6" value="choice-1-6" />
                <label for="radio-choice-1-6">1</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-2-6" value="choice-2-6" />
                <label for="radio-choice-2-6">2</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-3-6" value="choice-3-6"  />
                <label for="radio-choice-3-6">3</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-4-6" value="choice-4-6"  />
                <label for="radio-choice-4-6">4</label>

                <input type="radio" name="radio-choice-2-6" id="radio-choice-5-6" value="choice-5-6"  />
                <label for="radio-choice-5-6">5</label>
            </fieldset>

When I check on the mobile and simulators the <legend> tag hold text is aligned left even though I apply the style text-align: center for the <legend> tag. However if I put a longer text then it's works fine. eg:

<fieldset data-role="controlgroup" data-type="horizontal" data-theme="a">
                <legend><p>If given the choice, I would rather spend time with my family than with friends or working.</p><legend>
                <input type="radio" name="radio-choice-2-8" id="radio-choice-1-8" value="choice-1-8" />
                <label for="radio-choice-1-8">1</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-2-8" value="choice-2-8" />
                <label for="radio-choice-2-8">2</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-3-8" value="choice-3-8"  />
                <label for="radio-choice-3-8">3</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-4-8" value="choice-4-8"  />
                <label for="radio-choice-4-8">4</label>

                <input type="radio" name="radio-choice-2-8" id="radio-choice-5-8" value="choice-5-8"  />
                <label for="radio-choice-5-8">5</label>
            </fieldset>

Could any please shout with an answer ?

have your tried making the `legend` `display:block` explicitly, and that it's not floated? Same goes for the `fieldset` tag — dan richardson, Apr 26 '13 at 11:48

score 2 · Accepted Answer · edited Oct 16 '15 at 14:44

That is because in your first example legend no longer exist after jQuery Mobile restyled the page.

Instead of legend tag like this:

<legend>I would this site.</legend>

New structure look like this:

<div class="ui-controlgroup-label" role="heading">I would this site.</div>

Or if you want a full look, your new HTML (after jQM restyling) looks like this:

<fieldset id="custom-fieldset" data-theme="a" data-type="horizontal" data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-label" role="heading">I would this site.</div>
    <div class="ui-controlgroup-controls">
        <div class="ui-radio"><input type="radio" value="choice-1-6" id="radio-choice-1-6" name="radio-choice-2-6"><label for="radio-choice-1-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-radio-off ui-corner-left ui-btn-up-c"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">1</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-2-6" id="radio-choice-2-6" name="radio-choice-2-6"><label for="radio-choice-2-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">2</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-3-6" id="radio-choice-3-6" name="radio-choice-2-6"><label for="radio-choice-3-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-radio-off"><span class="ui-btn-inner"><span class="ui-btn-text">3</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-4-6" id="radio-choice-4-6" name="radio-choice-2-6"><label for="radio-choice-4-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-radio-off"><span class="ui-btn-inner"><span class="ui-btn-text">4</span></span></label></div>
        <div class="ui-radio"><input type="radio" value="choice-5-6" id="radio-choice-5-6" name="radio-choice-2-6"><label for="radio-choice-5-6" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-radio-off ui-corner-right ui-controlgroup-last"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">5</span></span></label></div>
    </div>
</fieldset>

Now you can use additional css to change this, like in this example: http://jsfiddle.net/Gajotres/YBSDb/

#custom-fieldset .ui-controlgroup-label {
    text-align: center;
}

Please see the following to see different act of `` tag for single line text and double line text. http://www.apartmentslanka.com/ztest_calender/test_radio.html — FR STAR, Apr 26 '13 at 12:27
Apologies about my Initial comment actually I've now deleted that. I was meant this `.survey_form fieldset .ui-controlgroup-label { text-align: center; }` — FR STAR, Apr 26 '13 at 12:40
Can you pls check my link in mobile and you'll see tag hold text are aligned left but not the longer text. — FR STAR, Apr 26 '13 at 12:53
What did I told you? When jQuery Mobile restyles the page legend is removed with this:
I would this site.
so it will no longer work like legend. You need to manually change new css to make it work (also shown in my example) — Gajotres, Apr 26 '13 at 13:33

score 0 · Answer 2 · answered Sep 15 '14 at 04:08

0

To use tag seems to work for JQM1.4.3:

<legend>
    <div style="text-align : center;">I would this site.</div>
</legend>

answered Sep 15 '14 at 04:08

xiaoboalex

1

Legend tag contain text aligned left in JQuery mobile?

2 Answers2