2012-10-07 3 views
13

Come dare spazio tra testo inline e input in JADE?spazio tra il testo inline e gli elementi di input in JADE?

div(data-role="horizontal", data-theme="a", data-overlay-theme="a", data-inline="true",class="ui-bar ui-grid-c") 
         div(class='ui-block-a') 
          div(data-role='fieldcontain') 
           label(for='memberaddress') Address Proof 
           textarea(id='memberaddress',name='memberaddress') 
         div(class='ui-block-b') 
          div(data-role="fieldcontain") 
           label(for="proof") Proof ID 
           select(name='proof', id='proof', data-theme='a', data-icon='bank', data-inline='true', data-native-menu="false") 
            option(value='0') Select Proof 
            option(value='1') Voter ID 
            option(value='2') Driving Licence 
            option(value='3') PANCARD 
            option(value='4') Ration Card 
         div(class='ui-block-c') 
          div(data-role="fieldcontain")       
           input(type='checkbox', name='addressmatchedCheck', id='addressmatchedCheck', data-inline="true") 
           label(for='addressmatchedCheck') Address Matched 

La mia uscita è: Attached Image is my output

Io non sono in grado di ottenere spazio tra etichetta e textarea.

+1

questo sembra più un problema di CSS che un problema di Jade. –

+2

no, questo non è un problema CSS. gli elementi di blocco in linea non impilati direttamente l'uno accanto all'altro avranno alcuni pixel di spazio bianco, mentre quelli sovrapposti direttamente accanto a ciascuno non lo faranno. Questo è un problema HTML che deve essere tenuto in considerazione nelle lingue dei modelli. Conti Slim per questo, consentendo di impostare se si desidera uno spazio bianco finale o meno.Di default non c'è lo spazio bianco finale. – Larry

risposta

7

aggiungere il margine al tuo css come suggerisce Jonathan ong, o si potrebbe aggiungere |   o span   tra l'etichetta e la textarea

+1

'| 'con almeno due spazi lo fa pure. vedere: http://stackoverflow.com/a/22220139/1407622 – rriemann

+4

Questa non è una grande idea, poiché un commit può rimuovere lo spazio bianco finale. Il margine –

+1

non è la risposta corretta. Il margine è CSS. Lo spazio bianco finale è un comportamento di più elementi inline-block che non sono impilati direttamente l'uno accanto all'altro. Questo è un problema HTML. L'utilizzo di CSS, entità html o qualsiasi altra opzione è un trucco. La giada ha bisogno di rendere conto per le persone che vogliono davvero trascinare lo spazio bianco. – Larry

1

V'è anche la "bella" opzione

Si dovrebbe essere in grado di chiamare giada come così (vedi http://jade-lang.com/api/):

var fn = jade.compile('string of jade', {pretty: true}); 

sarà inserire interruzioni di riga e rientranze in uscita tra tutti i nodi nel modello.

Se si preferisce basta inserire questo spazio, un'opzione è

label(for='memberaddress') Address Proof 
=' ' 
textarea(id='memberaddress',name='memberaddress') 
+0

'--pretty' (tramite CLI) e' {pretty: true} '(tramite API) non aiutano a ottenere spazi bianchi tra elementi in linea. Piuttosto, fornisce solo spazi bianchi, incluse nuove linee e rientranze, tra elementi di blocco. – matty

0

Come già stabilito in altre risposte, il problema è davvero con il codice html che Jade crea piuttosto che il CSS. Detto questo, un modo per creare spazio, senza modificare il markup, è aggiungere un margine a destra del tuo label.

@leff citato utilizzando =' '. Non l'ho mai visto prima, e non riesco a trovare riferimenti ad esso nella documentazione di Jade. Mi piace il fatto che funzioni, ma senza vedere i documenti, esito a usarlo in produzione.

Penso che l'opzione migliore sia utilizzare   ogni volta che è necessario inserire spazi bianchi che consentano il testo da avvolgere.   probabilmente funziona nella situazione che hai descritto, se vuoi davvero impedire che gli elementi di testo vengano avvolti. Sono più propenso a consentire a tutto di avvolgere e fluire, quindi generalmente uso   quando ho bisogno di assicurarmi che Jade sputi uno spazio.

Troverete   e qualche altra alternativa "spazio" nella pagina w3c character entity reference.

+0

Mi sbagliavo sulla documentazione per '='. È nella pagina "Codice" di [Jade docs] (http://jade-lang.com/reference/code/). – matty

0

Opzione 1 (la mia scelta)

input(type='button') 
|   
input(type='button') 

Opzione 2

input(type='button') 
= ' ' 
input(type='button') 

Opzione 3

input(type='button') 
| 
input(type='button') 

ci sono ot il suo però ....