Od jakiegoś czasu zmagałem się z tym (naprawdę nie byłam doświadczony z jQuery ui).

Próbuję zaimplementować UI JQuery, który ma selectmenu obok niektórych zwykłych Przyciski. Z jakiegoś powodu nie mogę zrozumieć, SelectMenu jest błędnie dopasowany; Jest wyższy na stronie niż przyciski.

Oto jak to wygląda:

Screenshot of mis-aligned UI elements

Nie jestem pewien, czy jest to błąd, czy nie, na pewno wygląda bardzo źle. Od dłuższego czasu walczę, ale nie byłem w stanie tego zrozumieć.

Markup jest naprawdę bardzo podstawowy, więc nie sądzę, że to bardzo pomocne, aby go włączyć tutaj., Ale to wszystko tutaj: http://jsbin.com/afixij/10/edit?html,cs ajs,Output. Rozszerzaj wyjście, aby zobaczyć wszystkie trzy elementy (SelectMenu i przyciski foo i bar) na tej samej linii.

3
unwind 17 sierpień 2014, 19:18

4 odpowiedzi

Najlepsza odpowiedź

Możesz po prostu zastosować vertical-align:middle do rozwijanej, która składa się z przęseł, aby przyciski dostosowane prawidłowo z rozwijaną.

#speed-button{
  vertical-align : middle;
}

Bin

Wygląda na to, że nie ma opcji, aby zapewnić niestandardową nazwę klasy do wyboru widgetu menu (jest źle, jeśli tak jest), ponieważ stosowanie reguły do klasy byłoby znacznie lepiej. Możesz tak dobrze zrobić: -

Zastosuj nazwę klasy dla select

I w CSS zapewnia ogólną regułę dla dowolnego .menu-button s

.menu-button + .ui-selectmenu-button{
   vertical-align : middle;
}

bin2

9
PSL 17 sierpień 2014, 15:44

Właściwie może być łatwiej, aby rzeczywiste przyciski (nie menu) przy użyciu

<button style="vertical-align: top"></button>

Można go zauważyć, a stworzenie niestandardowej klasy nie jest wymagane.

2
ale0xB 6 październik 2014, 09:07

Rozwiązanie, które zastosowane było umieszczenie treści, które chciałem być pionowo wyrównany w wpisie display: flex. Na przykład:

<div style="display: flex; align-items: center;">
    ... other elements here
</div>

Aby uzyskać więcej informacji na temat tego typu wyświetlacza, zobacz Ta doskonała dyskusja:

http://css-tricks.com/snipts/css/a-guide-to-flexbox/

2
Kolban 9 grudzień 2014, 01:24

Aby rozwinąć zaznaczoną odpowiedź, istnieje sposób na uzyskanie obiektu jQuery SelectMenu tworzy. Upewnij się, że zainicjujesz SelectMenu najpierw lub nie zadziała.

$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");

CSS:

.fixAnnoyingSelectAlignmentClass
{
   vertical-align: middle;
}
0
vik 16 sierpień 2016, 19:43