Ankündigung

Einklappen
Keine Ankündigung bisher.

Rooms-Menu -> Raumliste (Listview) zweispaltig

Einklappen
X
Einklappen
 
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 template Weiter
    #1

    Rooms-Menu -> Raumliste (Listview) zweispaltig

    Hallo,

    in meiner Datei rooms_menu.html habe ich eine relativ lange Liste mit meinen ganzen Räumen. Da ich dann aber auf meinem Tablet scrollen muß, möchte ich die Darstellung zweispaltig haben. Das heißt, das ganze soll dann ungefähr so aussehen:
    Raum 1 | Raum 2
    Raum 3 | Raum 4

    So sieht der Code aus (der Länge wegen sind jetzt jetzt nur zwei Räume drin):
    Code:
    <ul data-role="listview" data-dividertheme="c">
    <li data-role="list-divider">Keller</li>
<li data-icon="false">
        <a href="#popup_raum1" data-rel="popup" data-position-to="window">
            <img class="icon" src="{{ icon0 }}scene_office.png"/><h3>Raum 1</h3>
            <div class="ui-li-aside">
                {{ basic.float('ke.buero.temperatur', 'ke.buero.temperatur.luft', ' °C') }}<br />
                {{ basic.symbol('ke.buero.fensterauf', 'ke.buero.fenster', '', icon1~'fts_window_2w_open.png', 2) }}
                {{ basic.symbol('ke.buero.fenstergekippt', 'ke.buero.fenster', '', icon1~'fts_window_2w_tilt.png', 1) }}
            </div>
        </a>
</li>
<li data-icon="false">
        <a href="#popup_raum2" data-rel="popup" data-position-to="window">
            <img class="icon" src="{{ icon0 }}scene_office.png"/><h3>Raum 2</h3>
            <div class="ui-li-aside">
                {{ basic.float('ke.buero.temperatur', 'ke.buero.temperatur.luft', ' °C') }}<br />
                {{ basic.symbol('ke.buero.fensterauf', 'ke.buero.fenster', '', icon1~'fts_window_2w_open.png', 2) }}
                {{ basic.symbol('ke.buero.fenstergekippt', 'ke.buero.fenster', '', icon1~'fts_window_2w_tilt.png', 1) }}
            </div>
        </a>
</li>
</ul>
    Ich habe jetzt schon verschiedenes versucht (auch mit Tabellen und so) habe aber keinen Weg gefunden.
    Kann mir da einer einen Tip geben.

    Gruß, Sascha
    Stichworte: -
    #2
    Nikos Quad-Design kann das.

    Kommentar

      #3
      Hallo!

      Das geht grundsätzlich über CSS, ich habe bei in der Page die zweispaltige angezeigt werden soll das hier stehen:

      Code:
      <style type="text/css">

@media (min-width: 767px)
{
    .base .secondary {
        float: left;
        text-align: left;
        width: 27%;
    }
    
    .base .primary {
        width: 68%;
    }
}
      Eventuell ist das noch nicht alles, per Browser Debugger bekommt man das aber raus.

      Grüße
      David

      Kommentar

        #4
        mit CSS hatte ich auch schon verschiedene Versuche gestartet -leider ohne Erfolg. Duch einen Zufall bin ich gerade in einem anderen Beitrag auf diese Seite gestoßen: http://demos.jquerymobile.com/1.4.5
        Unabhängig von den vielen anderen tollen Lösungen, habe ich mit "Grid" mein Problem lösen können.

        Kommentar

          #5
          Hi,

          hab es in der visu.css damit gemacht:

          Code:
          .tilemenu li {
    border-right: 0 none;
    border-top: 0 none;
    box-sizing: border-box;
    display: block;
    float: left;
    height: 70px;
    margin: 0;
    overflow: hidden;
    padding: 0 5px 5px 0;
    position: relative;
    width: 50%;
}
          Eingebunden wird es bei mir dann mit:

          HTML-Code:
          <ul data-role="listview" data-dividertheme="c" class="tilemenu">

    
    <li data-icon="false">
        <a href="index.php?page=room_children">
        <h1>Kinderzimmer</h1>

            <div class="ui-li-aside"> {{ basic.float('temp_children', 'ff.children.heating.temperature', '°') }} // {{ basic.float('state_children', 'ff.children.heating.state', '%') }}</div>
        </a>
    </li>
    <li data-icon="false">
        <a href="index.php?page=room_office">
        <h3>Galerie</h3>

            <div class="ui-li-aside">{{ basic.float('temp_office', 'ff.office.heating.temperature', '°') }} // {{ basic.float('state_office', 'ff.office.heating.state', '%') }}</div>
        </a>
    </li>
</ul>
          Gruss

          Kommentar

            #6
            @lucipher: Das hat auch soweit geklappt. Ich musste nur die Zeile "height" aus dem CSS lassen damit auch die Listdevider mit richtiger Höhe angezeigt werden. Jetzt habe ich allerdings noch ein kleines Problem:
            Ich möchte das die Zelle neben dem Listdevider frei bleibt und daß die erste Listenzeile dann unter dem Listdevider beginnt und nicht wie auf dem Foto neben dem Listdevider. Wie bekomme ich das noch hin?

            smartvisu01.png

            Kommentar

              #7
              Hi,
              also kann ich so nicht nachvollziehen.

              Kann dir als Beispiel meine Ansicht zeigen:
              Visu1.PNG

              Bei mir ist alles gut. Kenn deinen Aufbau ja nicht. Vielleicht auch ein Fehler des HTML Gerüsts.


              Gruß
              Sascha

              Kommentar

                #8
                Hi,

                kann mir einer vll. einein Tipp geben.
                Ich hätte es gerne, dass in der Startansicht die Räume zweispaltig dargestellt werden. Wenn man dann auf einen Raum geklickt hat und die Räume links aufgelistet werden wäre es besser das einspaltige Design zu haben. Bei meinem 8" Tablet passen sonst die Raumnamen und die Temperatur nicht in das Feld.

                Ich bin was css angeht leider echt unfähig.

                Gruß Felix
                • Likes 1

                Kommentar

                  #9
                  Besse wäre es sogar das zweispaltige Design abhängig von der verfügbaren Breite zu verwenden.

                  Kommentar

                    #10
                    Okay, soweit ich verstehe müsste es mit @media(min-width) klappen. Leider aber noch nicht so, wie ich es gerne hätte. Wenn ich das Browserfenster schmaler ziehe, dann werden aus zwei Spalten eine und andersherum. Wenn ich aber von der Startseite zu einer Raum Seite wechsle finde ich keine Einstellung die mein Gewünschtes verhalten produziert, obwohl die verfügbare Breite offensichtlich unterschiedlich ist. Kann mir jemand auf die Sprünge helfen?

                    Edit: Geht nicht, da sich width auf die Browserfläche und nicht auf die Fläche in dem div bezieht . . . Ich forsche mal weiter, bin aber für Tipps dankbar.
                    Zuletzt geändert von felix86; 02.11.2015, 11:37.

                    Kommentar

                      #11
                      Zitat von lucipher Beitrag anzeigen
                      Hi,
                      also kann ich so nicht nachvollziehen.

                      Kann dir als Beispiel meine Ansicht zeigen:

                      Bei mir ist alles gut. Kenn deinen Aufbau ja nicht. Vielleicht auch ein Fehler des HTML Gerüsts.


                      Gruß
                      Sascha
                      Hallo Sascha,
                      kannst du bitte mal die Zeile posten, in der du die Überschrift einbindest?
                      Ich versuche mich auch gerade an einer zweispaltigen Darstellung und es völlig logisch, dass wenn ich über titlemenu in der css li.width auf 50% setze und wie folgt einbinde
                      Code:
                      [COLOR=#000080]<ul data-role="listview" data-dividertheme="c" class=[COLOR=#0000FF]"tilemenu"[/COLOR]>[/COLOR]
                      dass dann auch die Überschrift, bestehend aus
                      Code:
                      <li data-role="list-divider">Aussen</li>
                      ebenfalls nur über die halbe Breite angezeigt wird ... ich steh nur gerade auf dem Schlauch, wie ich für "list-divider" eine Ausnahme von "titlemenu" definieren kann. Gruß und Dank Jan

                      Kommentar

                        #12
                        gnarrf

                        Ich schaue heute abend mal nach und poste den HTML Code.

                        Kommentar

                          #13
                          Hallo zusammen,

                          hat schom jemand eine Lösung für das Problem mit der Überschrift?

                          Ich stehe auch gerade etwas auf dem Schlauch.

                          Liebe Grüße

                          Miguel

                          Kommentar

                            #14
                            Hallo,

                            also ich habe zwei Lösungen für euer list-divider Problem. Vielleicht haben hier noch ein paar CSS Gurus noch weitere und elegantere Beispiele.

                            In meinem geposteten Beispiel habe ich im <ul> Tag gar kein <li> Tag mit dem "list-divider" Attribut. Den "list-divider" habe ich außerhalb dieses Konstrukts erstellt und nicht mit der CSS Klasse verbunden.

                            HTML-Code:
                            <ul data-role="listview" data-dividertheme="c">
        <li data-role="list-divider">Erdgeschoss</li>
</ul><br>&nbsp;
                            Erst danach kommt dieser Code:
                            HTML-Code:
                            <ul data-role="listview" data-dividertheme="c" class="tilemenu">

  
    <li data-icon="false">
        <a href="index.php?page=room_children">
        <h1>Kinderzimmer</h1>

            <div class="ui-li-aside"> {{ basic.float('temp_children', 'ff.children.heating.temperature', '°') }} // {{ basic.float('state_children', 'ff.children.heating.state', '%') }}</div>
        </a>
    </li>
    <li data-icon="false">
        <a href="index.php?page=room_office">
        <h3>Galerie</h3>

            <div class="ui-li-aside">{{ basic.float('temp_office', 'ff.office.heating.temperature', '°') }} // {{ basic.float('state_office', 'ff.office.heating.state', '%') }}</div>
        </a>
    </li>
</ul>
                            Die Alternative ist, der css Klasse die Zuordnung auf das <li> element zu nehmen und als allgemein gültige Klasse zu deklarieren.

                            Code:
                            .tilemenu {
    border-right: 0 none;
    border-top: 0 none;
    box-sizing: border-box;
    display: block;
    float: left;
    height: 70px;
    margin: 0;
    overflow: hidden;
    padding: 0 5px 5px 0;
    position: relative;
    width: 50%;
}
                            Dann sieht der HTML Code so aus:
                            HTML-Code:
                            <ul data-role="listview" data-dividertheme="c" >

     <li data-role="list-divider">Erdgeschoss</li>
    <li data-icon="false" class="tilemenu">
        <a href="index.php?page=room_children">
        <h1>Kinderzimmer</h1>

            <div class="ui-li-aside"> {{ basic.float('temp_children', 'ff.children.heating.temperature', '°') }} // {{ basic.float('state_children', 'ff.children.heating.state', '%') }}</div>
        </a>
    </li>
    <li data-icon="false" class="tilemenu">
        <a href="index.php?page=room_office">
        <h3>Galerie</h3>

            <div class="ui-li-aside">{{ basic.float('temp_office', 'ff.office.heating.temperature', '°') }} // {{ basic.float('state_office', 'ff.office.heating.state', '%') }}</div>
        </a>
    </li>
</ul>
                            Hoffe das hilft.

                            Gruß
                            Zuletzt geändert von lucipher; 06.11.2015, 15:28.

                            Kommentar

                              #15
                              Hi lucipher,

                              danke für die Tipps. Nach einigem fummeln habe ich es jetzt geschafft und das Ergebnis kann sich sehen lassen.

                              Ich habe noch eine Sache, die mich etwas verwirrt:

                              Als ich das Beispiel Deines ersten Posts genommen hatte, funktionierten die Überschriften nicht (weil sie halt auch als "Block" dargestellt wurden), aber zumindest sah es sonst ordentlich aus. Auf PC, Laptop und Touchscreen sah es gleich gut aus.

                              Ich habe jetzt die zweite Variante Deines letzten Posts verwendet. Es ist jetzt perfekt, allerdings zeigt er es jetzt auf dem Touchscreen wieder nur einspaltig an. Der Cache ist aus und ich habe die rooms_menu auch um einen Raum erweitert. Diese Aktualisierung zeigt er auch an, als er liest es auf jeden Fall, berücksichtigt die zwei spalten allerdings nicht mehr.

                              Hat da jemand eine Idee für mich? Ich hab von CSS leider so viel Ahnung, wie ein Meerschwein vom Stabhochsprung.

                              Anbei mal ein Auszug des Beginns und des Endes meiner rooms_menu (also verkürzte Fassung)

                              Code:
                              <ul data-role="listview" data-dividertheme="c">
<li data-role="list-divider">Obergeschoss</li>
 <li data-icon="false" class="tilemenu">
  <a href="index.php?page=og_beleuchtung">
<img class="icon" src="{{ icon0 }}light_light.png" />

<------><------><------><h3>Flur</h3>

<------><------><------><div class="ui-li-aside">
{{ basic.symbol('erdgeschoss.flur.bodenlicht', ['erdgeschoss.flur.bodenlicht'], 'Bodenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
{{ basic.symbol('erdgeschoss.flur.treppenlicht', ['erdgeschoss.flur.treppenlicht'], 'Treppe', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
{{ basic.symbol('obergeschoss.flur.licht.status', ['obergeschoss.flur.licht.status'], 'Licht ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
{{ basic.float('obergeschoss.flur.temperatur', 'obergeschoss.flur.temperatur', 'temp') }} &nbsp;
</div>
<------><------></a>
<------></li>
<li data-icon="false" class="tilemenu">
<------><------><a href="index.php?page=og_schlafzimmer">
<------><------><------><img class="icon" src="{{ icon0 }}scene_making_love.png" />

<------><------><------><h3>Schlafzimmer</h3>

<------><------><------><div class="ui-li-aside">
{{ basic.symbol('obergeschoss.schlafzimmer.licht.status', ['obergeschoss.schlafzimmer.licht.status'], 'Schlafzimmer ', icon1~'light_light.png', 1, 'or') }}&nbsp;
{{ basic.symbol('obergeschoss.ankleide.licht.status', ['obergeschoss.ankleide.licht.status'], 'Ankleide  ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
{{ basic.symbol('obergeschoss.schlafzimmer.fenster', ['obergeschoss.schlafzimmer.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
{{ basic.float('obergeschoss.schlafzimmer.temperatur', 'obergeschoss.schlafzimmer.temperatur', 'temp') }} &nbsp;
</div>
<------><------></a>
<------></li>

<li data-icon="false" class="tilemenu">
<------><------><a href="index.php?page=kinderzimmer2">
<------><------><------><img class="icon" src="{{ icon0 }}scene_childs_room.png" />

<------><------><------><h3>Testraum</h3>

<------><------><------><div class="ui-li-aside">
{{ basic.symbol('obergeschoss.kindsued.licht.status', ['obergeschoss.kindsued.licht.status'], 'Deckenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;
{{ basic.symbol('obergeschoss.kindsued.fenster', ['obergeschoss.kindsued.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
{{ basic.float('obergeschoss.kindsued.temperatur', 'obergeschoss.kindsued.temperatur', 'temp') }} &nbsp;
</div>
<------><------></a>
<------></li>
&nbsp;</ul>

<ul data-role="listview" data-dividertheme="c">

<li data-role="list-divider">Erdgeschoss</li>
<li data-icon="false" class="tilemenu">
<------><------><a href="index.php?page=wohnen">
<------><------><------><img class="icon" src="{{ icon0 }}scene_livingroom.png" />

<------><------><------><h3>Wohnbereich</h3>

<------><------><------><div class="ui-li-aside">
{{ basic.symbol('erdgeschoss.wohnzimmer.licht.status', ['erdgeschoss.wohnzimmer.licht.status'], 'Wohnzimmer  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
{{ basic.symbol('erdgeschoss.wohnzimmer.esstisch', ['erdgeschoss.wohnzimmer.esstisch'], 'Esstisch  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
{{ basic.symbol('erdgeschoss.wohnzimmer.ambiente.status', ['erdgeschoss.wohnzimmer.ambiente.status'], 'Ambiente  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
{{ basic.symbol('erdgeschoss.wohnzimmer.giebel.status', ['erdgeschoss.wohnzimmer.giebel.status'], 'Giebel  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;<br>
{{ basic.symbol('erdgeschoss.wohnzimmer.terrassentuer', ['erdgeschoss.wohnzimmer.terrassentuer'], 'Terrasse Wohnzimmer geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;
{{ basic.symbol('erdgeschoss.essbereich.fenster', ['erdgeschoss.essbereich.fenster'], 'Terrasse Esstisch geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;<br>
{{ basic.float('erdgeschoss.wohnzimmer.temperatur', 'erdgeschoss.wohnzimmer.temperatur', 'temp') }} &nbsp;
</div>
<------><------></a>
<------></li>

&nbsp;</ul>
                              Viele Grüße

                              Miguel


                              Kommentar

                              Vorherige 1 2 template Weiter
                              Lädt...
                              X

                              Wir verarbeiten personenbezogene Daten über die Nutzer unserer Website mithilfe von Cookies und anderen Technologien, um unsere Dienste bereitzustellen. Weitere Informationen findest Du in unserer Datenschutzerklärung.

                              Indem Du unten auf "ICH stimme zu" klickst, stimmst Du unserer Datenschutzerklärung und unseren persönlichen Datenverarbeitungs- und Cookie-Praktiken zu, wie darin beschrieben. Du erkennst außerdem an, dass dieses Forum möglicherweise außerhalb Deines Landes gehostet wird und bist damit einverstanden, dass Deine Daten in dem Land, in dem dieses Forum gehostet wird, gesammelt, gespeichert und verarbeitet werden.

                              Ich stimme zu