Popup: bekomme Scrollbereich nicht weg

[Gunther]

Eine Frage zum Popup Widget:

Ich habe immer einen Bereich zum Scrollen, egal wie groß ich den Popupbereich mache.
Wie bekomme ich das weg?

So sieht es bei mir in Tablet UI aus. Screenshot habe ich angehängt.

Code Auswählen Erweitern

<div class="">
            <div data-type="popup"
                 data-height="350px"
                 data-width="700px"
                 data-draggable="false"
                 class="">
                 
                <div data-type="push"
                     data-icon="fa-google-wallet"
                     data-on-color="og_bz_hue_led_streifen_schattenfuge_1_farbe:rgb"
                     data-on-background-color="og_bz_hue_led_streifen_schattenfuge_1_farbe:rgb"
                     data-off-background-color="og_bz_hue_led_streifen_schattenfuge_1_farbe:rgb"
                     data-off-color="og_bz_hue_led_streifen_schattenfuge_1_farbe:rgb"
                     data-hide="og_bz_licht_schattenfuge:state"
      data-hide-on="off"                     
                     class="large invert">
                </div>
                <div data-type="label" data-hide="og_bz_licht_schattenfuge:state" data-hide-on="off" class="darker">Farbe & Dimm</div>
                <div class="dialog dialogTransparent">
                    <header>Schattenfuge</header>
                    <div class="top-space">
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="ls_og_bz_schattenfuge_hue"
                                 data-set="scene"
                                 data-set-on="Energietanken"
                                 data-off-color="#E8ECFF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Energietanken</div></div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="ls_og_bz_schattenfuge_hue"
                                 data-set="scene"
                                 data-set-on="Konzentrieren"
                                 data-off-color="#FFEAD8"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Konzentrieren</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="ls_og_bz_schattenfuge_hue"
                                 data-set="scene"
                                 data-set-on="Lesen"
                                 data-off-color="#FFCBA1"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Lesen</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="ls_og_bz_schattenfuge_hue"
                                 data-set="scene"
                                 data-set-on="Entspannen"
                                 data-off-color="#FFB97D"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Entspannen</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="ls_og_bz_schattenfuge_hue"
                                 data-set="scene"
                                 data-set-on="Nachtlicht"
                                 data-off-color="#010100"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Nachtlicht</div>
                        </div>
                    </div>
                   
                    <div class="col-1-3">
             <div onclick="$('.dialog-close').trigger('click');"
              data-type="volume"
                  data-device="og_bz_hue_gr_led_streifen_decke_farbe"
                  data-get="og_bz_hue_led_streifen_schattenfuge_1_farbe:pct"
                  data-set="pct"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space-3x">
            </div>
            <div class="darker">Dimmen Farbe</div>
            </div>
                    <div class="col-1-3">
                    <div data-type="colorwheel"
      data-device="og_bz_hue_gr_led_streifen_decke_farbe"
      data-get="og_bz_hue_led_streifen_schattenfuge_1_farbe:rgb"
      data-set="rgb"
      class="roundIndicator">
      </div>
      <div class="darker">individuelle Farbe</div>
      </div>
      <div class="col-1-3">
             <div onclick="$('.dialog-close').trigger('click');"
              data-type="volume"
                  data-device="og_bz_hue_gr_led_streifen_decke_weiss"
                  data-get="og_bz_hue_led_streifen_schattenfuge_1_weiss:pct"
                  data-set="pct"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space-3x">
            </div>
            <div class="darker">Dimmen Weiss</div>
            </div>
           
            </div>
            </div>
        </div>
    </div>
    </li>   

[setstate]

Da fehlt ein

Code Auswählen Erweitern

<div class="row">

vorher

Code Auswählen Erweitern


</div>
                   
                    <div class="col-1-3">


nachher

Code Auswählen Erweitern


</div>
                 <div class="row">   
                    <div class="col-1-3">


[Gunther]

klappt! Danke Dir!

[Gunther]

Ich habe schon wieder das Problem, dass ich den Scrollbereich nicht wegbekomme. Vgl. dazu beigefügten Screenshot.
Gibt es da bestimmte Dinge die einen Scollbalken erzeugen?

Mein Code der Seite:

Code Auswählen Erweitern

<!-- ======================================== Template Leuchtkästen EG Kino ======================================== -->
<!-- ============================================================================================================== -->
<!-- ======================================== einfügen mit (Beispiel) ======================================== -->
<!-- <div data-template="template_lichtkaesten_eg_ki.html" data-parameter='{"var_seite":"2_light_etage_xx"}'></div> -->
<!-- ============================================================================================================== -->


<!-- ======================================== Start horizontale Box ======================================== -->
<div class="hbox">
    <!-- ======================================== Start Switch ======================================== -->
    <div class="vbox">
    <div data-type="switch"
data-device="eg_ki_leuchtrahmen_hauptschalter"
data-set-on="on"
data-set-off="off"
data-get-on="!off"
data-get-off="off"
data-icon="fa-photo"
class="large">
</div>
    <!-- ======================================== Ende Switch ======================================== -->
</div>
   
    <!-- ======================================== Anfang Symbol (Optionsbutton) ======================================== -->
    <div data-type="symbol" id="eg_ki_leuchtrahmen_hauptschalter_var_seite" data-device='eg_ki_leuchtrahmen_hauptschalter' data-get="" data-icon="fa-bars" data-hide="eg_ki_leuchtrahmen_hauptschalter:state" data-hide-on="off" class="left-narrow top-space"></div>
    <!-- ======================================== Ende Symbol (Optionsbutton) ======================================== -->
    </div>
<!-- ======================================== Ende horizontale Box ======================================== -->     
    <!-- ======================================== Anfang Popup ======================================== -->
    <div data-type="popup" data-draggable="false" data-height="300px" data-width="900px" data-mode="fade" data-starter="#eg_ki_leuchtrahmen_hauptschalter_var_seite" id="pop_eg_ki_leuchtrahmen_hauptschalter_var_seite_volume">
      <!-- ======================================== Anfang Dialog ======================================== -->
      <div class="dialog">
          <header>Leuchtkästen Dimmen</header>
          <!-- Start horizontale Box 1 -->
        <div class="hbox items-top">

<!-- Start vertikale Box -->
        <div class="vbox">
        <div class="darker" data-type="label">Panorama</div>
              <div data-type="volume"
                  data-device="eg_ki_leuchtkasten_pa_pct"
                  data-get="state"
                  data-set="state"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space">
            </div>
        </div>
        <!-- Ende vertikale Box -->
           
<!-- Start vertikale Box -->
        <div class="vbox">
        <div class="darker" data-type="label">Bild links</div>
              <div data-type="volume"
                  data-device="eg_ki_leuchtkasten_li_pct"
                  data-get="state"
                  data-set="state"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space">
            </div>
        </div>
        <!-- Ende vertikale Box -->           
           
<!-- Start vertikale Box -->
        <div class="vbox">
        <div class="darker" data-type="label">Bild mitte</div>
              <div data-type="volume"
                  data-device="eg_ki_leuchtkasten_mi_pct"
                  data-get="state"
                  data-set="state"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space">
            </div>
        </div>
        <!-- Ende vertikale Box --> 

<!-- Start vertikale Box -->
        <div class="vbox">
        <div class="darker" data-type="label">Bild rechts</div>
              <div data-type="volume"
                  data-device="eg_ki_leuchtkasten_re_pct"
                  data-get="state"
                  data-set="state"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  class="dim-tick dim-back top-space">
            </div>
        </div>
        <!-- Ende vertikale Box -->
           
            <!-- Ende horizontale Box 1 -->
        </div>
            </div>
            <!-- ======================================== Ende Dialog ======================================== -->
      </div>
<!-- ======================================== Ende Popup ======================================== -->

[setstate]

mit der Ergänzung geht es

vorher

Code Auswählen Erweitern


        $(document).on("changedSelection", function () {

            $(
                '.gridster li > header ~ .hbox:only-of-type, ' +
                '.gridster li > header ~ .center:not([data-type]):only-of-type, ' +
                '.card > header ~ div:not([data-type]):only-of-type, ' +
                '.gridster li header ~ div:first-of-type:nth-last-of-type(1)'
            ).each(function (index) {
                var heightHeader = $(this).siblings('header').outerHeight();
                if (heightHeader > 0) {
                    $(this).css({
                        'height': 'calc(100% - ' + $(this).siblings('header').outerHeight() + 'px)'
                    });
                }
            });

        });


nachher

Code Auswählen Erweitern


        $(document).on("changedSelection", function () {

            $(
                '.gridster li > header ~ .hbox:only-of-type, ' +
                '.dialog > header ~ .hbox:first-of-type:nth-last-of-type(1), ' +
                '.gridster li > header ~ .center:not([data-type]):only-of-type, ' +
                '.card > header ~ div:not([data-type]):only-of-type, ' +
                '.gridster li header ~ div:first-of-type:nth-last-of-type(1)'
            ).each(function (index) {
                var heightHeader = $(this).siblings('header').outerHeight();
                if (heightHeader > 0) {
                    $(this).css({
                        'height': 'calc(100% - ' + $(this).siblings('header').outerHeight() + 'px)'
                    });
                }
            });

        });


[Gunther]

Danke, in welcher Datei mache ich das?

[setstate]

in der Haupt-JS "fhem-tablet-ui.js"

[Gunther]

Danke, werde ich testen.
Kommt das mit dem nächsten Update mit?