CODEWITHSUNDEEP
jquerymobile
VitalyC
VitalyC

Reputation: 89

Jquery mobile <fieldset data-role="controlgroup"> make controls shrink

Why this DIVs looks different ?
First:

<div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
      <legend>City</legend>
      <input type="text" id="select_team_city" value="" placeholder="Type Team City"/>
   </fieldset>
</div>

Second:

<div data-role="fieldcontain">
   <label for="select_team_name">Name</label>
   <input type="text" id="select_team_name" value="" placeholder="Type Team Name"/>
</div>

Upvotes: 2

Views: 6434

Answers (1)

mara-mfa
mara-mfa

Reputation: 895

Ehm, I am not sure if I correctly understand. They look different because legend does something else than label

As per w3c, legend groups related elements to a form (multiple fields, for example)

http://www.w3schools.com/tags/tag_legend.asp

whereas label defines a lable for an input element

http://www.w3schools.com/tags/tag_label.asp

Please see the examples there, or consider the following. I am not sure what you are trying to achieve but the following is how I understand the usage of these tags:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Team Information</legend>
        <label for="select_team_city">City</label>
        <input type="text" id="select_team_city" value="" placeholder="Type Team City"/>
        <label for="select_team_name">Name</label>
        <input type="text" id="select_team_name" value="" placeholder="Type Team Name"/>
    </fieldset>
</div>

See the working example here: http://jsfiddle.net/C3CR2/2/

Upvotes: 1

Related Questions