FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Eddy am 20 Januar 2018, 20:03:30

Titel: Zellabstand und Zentrierung
Beitrag von: Eddy am 20 Januar 2018, 20:03:30
Hallo Leute,

ich habe ein Rollosymbol und Schaltflächen nebeneinander. Allerdings sind diese nicht zentriert. Die Doku zeigt offensichtlich nicht alle CSS Optionen an. Kann mir jemand helfen?

Hier mein Code:

<li data-row="1" data-col="6" data-sizey="4" data-sizex="1">
                <header>ROLLOS</header>
                <div class="sheet">
                    <div class ="row">
                        <div class="col">
                            <div data-type="symbol"
                                 class="big narrow"
                                 data-device="Rollo_Fenster_Kinderzimmer_OG"
                                 data-get="level"
                                 data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60",
                                 "oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
                                 data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' 
                                 data-on-color="#2A2A2A"
                                 data-on-background-color="#aa6900"
                                 data-background-icon="fa-circle">
                            </div>
                        </div>
                        <div class="col">
                            <div class="triplebox-v small top-space-2x">
                                <div data-type="push" data-device="Rollo_Fenster_Kinderzimmer_OG" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="on" class=""> </div>
                                <div data-type="push" data-device="Rollo_Fenster_Kinderzimmer_OG" data-icon="fa-minus" data-background-icon="fa-square-o" data-set-on="stop" class=""> </div>
                                <div data-type="push" data-device="Rollo_Fenster_Kinderzimmer_OG" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="off" class=""> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
Titel: Antw:Zellabstand und Zentrierung
Beitrag von: setstate am 21 Januar 2018, 23:02:05
Es verwirrt mich etwas: Deine Gridster-Box ist 4 Einheiten hoch und nur 1 Einheit breit, aber es sind zwei col verbaut. Die können nur schwer nebeneinander passen. Wenn man etwas Platz macht (3x3), könnte es so passen.


<li data-row="1" data-col="6" data-sizey="3" data-sizex="3">
                <header>ROLLOS</header>
                <div class="sheet">
                    <div class ="row">
                        <div class="col center">
                            <div data-type="symbol"
                                 class="big"
                                 data-device="Rollo_Fenster_Kinderzimmer_OG"
                                 data-get="level"
                                 data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60",
                                 "oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
                                 data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' 
                                 data-on-color="#2A2A2A"
                                 data-on-background-color="#aa6900"
                                 data-background-icon="fa-circle">
                            </div>
                        </div>
                        <div class="col center">
                            <div class="triplebox-v small">
                                <div data-type="push" data-device="Rollo_Fenster_Kinderzimmer_OG" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="on" class=""> </div>
                                <div data-type="push" data-device="Rollo_Fenster_Kinderzimmer_OG" data-icon="fa-minus" data-background-icon="fa-square-o" data-set-on="stop" class=""> </div>
                                <div data-type="push" data-device="Rollo_Fenster_Kinderzimmer_OG" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="off" class=""> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>