2011-11-24 13 views
6

Ho usato il pulsante di opzione nella mia applicazione jquery mobile e sto usando jquery mobile 1.0 e jquery 1.6.4. Il problema è sempre allineato a sinistra. Quindi, ho provato a spostarmi al centro ma non funziona. Come risolvere questo? Grazie in anticipo.Il pulsante radio non si allinea correttamente al centro in jQuery Mobile versione 1.0?

<div id="userOptionGroup" data-role="contain"> 
      <fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" style="font-size:12px;border:2px;"> 
       <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-wuser" value="windowUser" checked="checked" /> 
       <label for="radio-choice-wuser" style="font-size: 12px;" class="ui-btn-section-active" id="lblWindowUser">win user</label> 
       <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-muser" value="mfileUser" /> 
       <label for="radio-choice-muser" style="font-size: 12px;" id="lblMfileUser">M file user</label> 
      </fieldset> 
      </div> 

risposta

8

Y ou deve avvolgere i radiobutton in un div con larghezza fissa e margine impostato su auto sul fieldset. Ecco come, ovviamente, è meglio non usare i css in linea.

<fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center"> 
    <div style="width: 200px; margin: 0 auto;"> 
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> 
    <label for="radio-choice-1">A</label> 
    <input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> 
    <label for="radio-choice-2">B</label> 
</div> 
</fieldset> 
+0

hey. !!!!!! suona bene.! – selladurai

1

è necessario sovrascrivere questa classe nel file css personalizzato

.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { 
    left: 303px;// can vary according to your lay out 
} 

oppure è possibile definire la propria classe che più di scrivere sopra proprietà ... qualcosa come questo-

.leftAlign{left: 303px;} 

quindi assegnare questa classe per l'intervallo che contiene il pulsante Radion personalizzato con jQuery ...

+0

: ho provato questo, ma non funziona. – selladurai

+0

l'ho provato sulla mia macchina.è funzionante per me ... assicurati che il tuo file css personalizzato venga dopo jquery mobile css file – Vivek

+0

puoi ri-produrre il tuo problema su jsfiddle – Vivek

1

Provo troppo e finalmente la prima risposta di questa domanda risolve il mio problema. Sembra essere un bug di jquery mobile, ma dovrebbe essere gestito correttamente senza eseguire tale patch :). Grazie Hampus.

0

io prendo il link data dal nir:

Avvolgere il fieldset in un div con stile display: table; margin: 0 auto;. Questo potrebbe essere un po 'un trucco, ma funziona senza dover impostare larghezza o margine.

<div style="display: table; margin: 0 auto;"> 
    <fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" style="font-size:12px;border:2px;"> 
     <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-wuser" value="windowUser" checked="checked" /> 
     <label for="radio-choice-wuser" style="font-size: 12px;" class="ui-btn-section-active" id="lblWindowUser">win user</label> 
     <input type="radio" data-theme="b" name="radio-choice-b" id="radio-choice-muser" value="mfileUser" /> 
     <label for="radio-choice-muser" style="font-size: 12px;" id="lblMfileUser">M file user</label> 
    </fieldset> 
</div> 
Problemi correlati