Widget Darstellung

[mayrjohannes]

Hallo,
ich habe mir ein kleines Widget gebaut um an meiner Heizung Parameter verstellen zu können. Dafür habe ich als vorlage das "Small RTR" Widget verwendet.
Soweit funktioniert alles wie gewünscht. Nur verstehe ich nicht was ich an der Darstellung falsch mache.
Warum bekomme ich hier so große Abstände oberhalb des neuen Widgets?
Widget.PNG
Ich habe versucht einzelne Elemente des Widgets weg zu lassen (Buttons, Text, ..) immer mit dem selben Ergebniss. Ich hätte einfach gerne das sich das ganze etwas ähnlicher zum basic.float darüber verhält.

Hier der Code der Seite:

    <div class="block">
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
            <div data-role="collapsible" data-collapsed="false">
                <h3>Boiler</h3>
                <table width=100%>
                    <tr>
                        <td align="left">Boilertemperatur</td>
                        <td align="right" width="20%">&nbsp; {{ basic.float('BoilerTemp', 'heizung.boiler_temperatur', '°C') }}</td>
                    </tr>
                    <tr>
                        <td align="left">Boileransteuerung</td>
                        <td align="right" width="20%">&nbsp; {{ basic.float('BoilerAnsteuerung', 'heizung.boiler_pumpe_ansteuerung', '%') }}</td>
                    </tr>
                    <tr>
                        <td align="left">Obere Ladeschwelle</td>
                        <td align="right" width="40%">&nbsp; {{ incdec.one ('BoilerSollTemp', 'heizung.boiler_solltemperatur', '°C', 1) }}</td>
                    </tr>
                    <tr>
                        <td align="left">Untere Ladeschwelle</td>
                        <td align="right" width="40%">&nbsp; {{ incdec.one ('BoilerMinTemp', 'heizung.boiler_minimaltemperatur', '°C', 1) }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

Hier der Code vom Widget:

/**
* Small Increment / Decrement Widget
*
* @param       unique id for this widget
* @param       a gad/item for the actual value
* @param       a gad/item for unit
* @param       step for plus/minus buttons (optional, default 0.5)
*/
{% macro one(id, gad_set, unit, step) %}
{% import "basic.html" as basic %}
{% set uid = uid(page, id) %}

/** Design */

<div id="{{ uid }}" class="inc_dec">
    <table width="100%" align="left">
        <tr>
            <td width="15%">
                {% if gad_set %}
                    {{ basic.button(id~'minus', '', '', 'minus', '', 'micro') }}
                {% endif %}
            </td>
            <td width="70%" align="center">{{ basic.float(id~'set', gad_set, unit) }}</td>
            <td width="15%">
                {% if gad_set %}
                    {{ basic.button(id~'plus', '', '', 'plus', '', 'micro') }}
                {% endif %}
            </td>
        </tr>
    </table>
    {% if gad_set %}
        /** Events */
        <script type="text/javascript">
            // plus / minus
            $("#{{ uid~'minus' }}").unbind('click').bind('click', function(){
                var temp = (Math.round((parseFloat($("#{{ uid~'set' }}").html().replace(',','.')) - {{ step|default(0.5) }}) * 10) / 10).toFixed(1);
            $("#{{ uid~'set' }}").html(temp + "{{ unit }}");
            io.write("{{ gad_set }}", temp);
            });
            $("#{{ uid~'plus' }}").unbind('click').bind('click', function(){
                var temp = (Math.round((parseFloat($("#{{ uid~'set' }}").html().replace(',','.')) + {{ step|default(0.5) }}) * 10) / 10).toFixed(1);
            $("#{{ uid~'set' }}").html(temp + "{{ unit }}");
            io.write("{{ gad_set }}", temp);
            });
        </script>
    {% endif %}
</div>
{% endmacro %}

[smai]

Wozu das      zu Beginn jeder Zelle? Vielleicht ist dieses die Ursache.

[mayrjohannes]

Ich De** suche seit Stunden im Widget. Dachte es kann nur da drinnen versteckt sein da diese Distanz ja bei allen anderen Widgets auch nicht vorkommt.
Danke!!!