✔ jQueryUI Selectmenu Abstand unten

[Johnnii360]

Servus zusammen!

Ich doktor schon seit ein paar Tagen an dem blöden unteren Abstand des Selectmenüs (Benutzer) rum. Ich bekomm das mit den Inputs nicht auf eine Linie. Kann mir evtl. jemand einen Tipp geben? Dr. Google will mir leider auch nix brauchbares ausspucken. Das Selectmenu hat die ID "FilterBenutzer".

Hier ein Screenshot:


HTML-Code:

<fieldset id="toolbar" class="ui-widget-header ui-corner-all">
    <legend><img src="images/icons/funnel.png" width="16" height="16" alt="" style="border: none; vertical-align: middle; margin-right: 5px;">Filter</legend>
    <button type="submit" id="FilterSubmit" name="FilterSubmit" style="float: right;">Filtern</button>
    <ul id="ToolbarFilter">
        <li>
        <input type="number" id="FilterEingangsjahr" name="FilterEingangsjahr" class="text ui-corner-all">
        <label for="FilterEingangsjahr">Eingang</label>
        </li>
        <li>
        <select id="FilterBenutzer" name="FilterBenutzer">
            <option value="0" selected>&nbsp;</option>
<?php
        /**
         * Auslesen und Auflisten der Benutzer
         */
        $BenutzerP = $mysqli->query("SELECT id,nachname,vorname,benutzername FROM ".$tabname_kalender_benutzer." ORDER BY nachname,vorname ASC") or print('<option>Script oder MySQL-Fehler</option>');
        while($Benutzer = $BenutzerP->fetch_assoc())
        {
            echo '<option value="'.$Benutzer['id'].'">'.$Benutzer['nachname'].', '.$Benutzer['vorname'].'</option>';
        }
?>
        </select>
        <label for="FilterBenutzer">Benutzer</label>
        </li>
        <li>
        <input type="text" id="FilterUrlaubVon" name="FilterUrlaubVon" class="text ui-corner-all">
        <input type="text" id="FilterUrlaubBis" name="FilterUrlaubBis" class="text ui-corner-all">
        <label for="FilterUrlaubVon">Von-Bis</label>
        </li>
        <li>
        <div id="FilterStatusButtonset">
            <input type="radio" id="FilterStatus1" name="FilterStatus" title="Offen" value="2"><label for="FilterStatus1" class="FilterStatusButtonsetLabel"><img src="images/icons/hourglass.png" width="16" height="16" alt="" title="Offen" style="border: none; vertical-align: middle"></label>
            <input type="radio" id="FilterStatus2" name="FilterStatus" title="Angenommen" value="1"><label for="FilterStatus2" class="FilterStatusButtonsetLabel"><img src="images/icons/okay.png" width="16" height="16" alt="" title="Angenommen" style="border: none; vertical-align: middle"></label>
            <input type="radio" id="FilterStatus3" name="FilterStatus" title="Abgelehnt" value="0"><label for="FilterStatus3" class="FilterStatusButtonsetLabel"><img src="images/icons/cancel.png" width="16" height="16" alt="" title="Abgelehnt" style="border: none; vertical-align: middle"></label>
        </div>
        <label for="FilterStatus">Status</label>
        </li>
    </ul>
</fieldset>

Hier CSS:

/* Toolbars */
ul#ToolbarFilter
{
    list-style: none;
    padding: 0;
    margin: 0;
}

ul#ToolbarFilter li
{
    display: inline-block;
    margin-top: 0;
    margin-right: 16px;
    padding: 0;
}

#toolbar label:not(.FilterStatusButtonsetLabel):not(.FilterSortierungButtonsetLabel)
{
    display: block;
    font-size: 8pt;
    text-align: center;
}

#toolbar input[type="number"]
{
    width: 60px;
}

#toolbar #FilterBenutzer
{
   margin-bottom: 0 !important;
}

#toolbar #FilterUrlaubVon, #toolbar #FilterUrlaubBis
{
    width: 130px;
}

#toolbar div#FilterStatusButtonset, #toolbar div#FilterStatusButtonset .ui-widget, #toolbar div#FilterSortierungButtonset, #toolbar div#FilterSortierungButtonset .ui-widget
{
    padding: 0 !important;
    font-size: 8pt !important;
    margin-bottom: 0;
}

Würde mich über Eure Hilfe freuen.

Vielen Dank schon mal!

 

[SpiceLab]

Kann mir evtl. jemand einen Tipp geben?

Konkret leider erstmal nein, da der Screenshot die Ursache im Quellcode (HTML, CSS, ...) nicht offenbart.

Ohne spezielle CSS-Formatierung(en) taucht dieses Problem nämlich nicht auf.

Grundsätzlich ist es aber immer hilfreich, weil zielführend, das betroffene Element einfach mit den anhängigen Browser-DevTools auf seine (CSS-)Gegebenheiten hin zu untersuchen.

 

[Johnnii360]

Konkret leider erstmal nein, da der Screenshot die Ursache im Quellcode (HTML, CSS, ...) nicht offenbart.

Ohne spezielle CSS-Formatierung(en) taucht dieses Problem nämlich nicht auf.

Grundsätzlich ist es aber immer hilfreich, weil zielführend, das betroffene Element einfach mit den anhängigen Browser-DevTools auf seine (CSS-)Gegebenheiten hin zu untersuchen.

Achso, ja, natürlich, sorry, gestern noch ganz vergessen. Hab's nachgetragen.

 

[SpiceLab]

Die Ursache ist an anderer Stelle zu suchen, wie es mein jsfiddle-Demo http://jsfiddle.net/spicelab/j011ya2s/ anhand deiner Quellcode-Snippets zeigt.

 

[Johnnii360]

Nicht wirklich. Hab's mal geupdated. http://jsfiddle.net/j011ya2s/6/
Inputs, Buttons etc. sind alle in einer Linie. Nur nicht das blöde Select.

 

[SpiceLab]

Nicht wirklich.

Doch

http://jsfiddle.net/spicelab/j011ya2s/7/

$(function(){
  $("#FilterStatusButtonset").buttonset();
  $("button").button();
  //$("select").selectmenu(); //auskommentiert -> select sitzt in einer Höhe
});

 

[Johnnii360]

Sehr witzig! Ich will aber das jQueryUI Selectmenu haben.

 

[SpiceLab]

Sehr witzig! Ich will aber das jQueryUI Selectmenu haben.

Witzig war das überhaupt nicht gemeint, auch wenn der "Big Grin"-Smiley den Eindruck erweckt.

Wie gestern schon empfohlen, mit Hilfe der Developer-Tools lässt sich alles analysieren

Der Auslöser findet sich in "jquery-ui.css" in der nachfolgenden padding-Regel:

.ui-selectmenu-button span.ui-selectmenu-text {
  text-align: left;
  padding: 0.4em 2.1em 0.4em 1em;
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

[Johnnii360]

Boah, echt jetzt? Ich hab die scheiß Datei dauernd offen und eigentlich schon alle .ui-selecmenu... durch. Aber das hab ich scheinbar noch net beachtet. Wenn's das wäre müsst ich mich in den Arsch beißen.
Ich hab aber auch schon dem Select padding: 0 !important zugewiesen per ID, aber hat nix gebracht. Das is ja das Komische.

 

[SpiceLab]

Ich hab aber auch schon dem Select padding: 0 !important zugewiesen per ID, aber hat nix gebracht. Das is ja das Komische.

Versuch mal den Aufruf der CSS-Dateien im HTML-Code zu tauschen