Stylizace formuláře, konkrétně addSelect prvku a addText area s addRule(Form::INTEGER)

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
iNyxLadis
Člen | 48
+
0
-

Ahoj,

mám amatérský dotaz. Jak jsem v Nette schopen efektivně vyzdobit formuláře? Nějaký základ v css pomocí inputů jsem zvládl, ale to má vliv jen na základní addText prvky. Pokud mám ve formuláři selectbox, nebo addText s pouze číselným vstupem, tak jsou vstupní políčka nehezky rozhozená a nestylizovaná a nejde mi s tím v cssku pohnout. Selectbox se nastavuje dle nejširšího prvku v nabídce a to třeba při řešení závislých selectboxů je příšerně nevzhledné.

Jak se toto zpravidla řeší?
Děkuji

uestla
Backer | 799
+
0
-

Prvkům můžeš nastavit CSS classu (buď v kódu v definici formuláře, nebo v šabloně při ručním vykreslení) a podle toho si pak ten který prvek nastylovat, vč. šířky selectboxu.

iNyxLadis
Člen | 48
+
0
-

uestla napsal(a):

Prvkům můžeš nastavit CSS classu (buď v kódu v definici formuláře, nebo v šabloně při ručním vykreslení) a podle toho si pak ten který prvek nastylovat, vč. šířky selectboxu.

Ahoj, díky za reakci. To zkouším, ale bohužel se stále dostávám k tomu, že na selectboxy nic vliv nemá :/.

šablona:

{form timesheetForm}
    <table class="tableform">
        <tr>
            <th>{label Cmp_ID /}</th>
            <td>{input Cmp_ID}</td>
        </tr>
        <tr>
            <th>{label Prj_ID /}</th>
            <td>{input Prj_ID}</td>
        </tr>
        <tr>
            <th>{label TskName /}</th>
            <td>{input TskName}</td>
        </tr>
        <tr>
            <th>{label TskDescription1 /}</th>
            <td>{input TskDescription1}</td>
        </tr>
        <tr>
            <th>{label TskDateStart /}</th>
            <td>{input TskDateStart}</td>
        </tr>
        <tr>
            <th>{label TskDateEnd /}</th>
            <td>{input TskDateEnd}</td>
        </tr>
        <tr>
            <th>{label TskTaskmaster /}</th>
            <td>{input TskTaskmaster}</td>
        </tr>
        <tr>
            <th>{label TskWorked /}</th>
            <td>{input TskWorked}</td>
        </tr>
        <tr>
            <th>{label Usr_ID /}</th>
            <td>{input Usr_ID}</td>
        </tr>
        <tr>
            <th>{label submit /}</th>
            <td>{input submit}</td>
        </tr>
    </table>
{/form}

css:

.tableform input {
    width: 250px;
}

Jak tedy stylizovat selectboxy? Díky

EDIT: už jsem na to přišel
.tableform select {
width: 250px;
} funguje

Editoval iNyxLadis (26. 12. 2016 12:30)

uestla
Backer | 799
+
+1
-

@iNyxLadis už chápu – název Latte makra nutně neznamená název HTML elementu, který se jím vykreslí.

Tohle lze zjistit buď inspectem elementu (F12), nebo vyčtením ze zdrojového kódu (standardně ho zobrazíš přes Ctrl+U).

iNyxLadis
Člen | 48
+
0
-

uestla napsal(a):

@iNyxLadis už chápu – název Latte makra nutně neznamená název HTML elementu, který se jím vykreslí.

Tohle lze zjistit buď inspectem elementu (F12), nebo vyčtením ze zdrojového kódu (standardně ho zobrazíš přes Ctrl+U).

Velice ti děkuji za doplnění :-)