css formatting of jquery ui autocomplete

Question

I have a web-based utility for chess tournament manual pairings. I need to format jquery ui autocomplete to make the white players select menu items left justified and the black players select menu items right justified. Here is the link: http://communitychessclub.com/test.php

I have seen many confusing and probably contradictory CSS styling methods. For example:

ul.ui-autocomplete.ui-menu {background:pink; font-size:1.5rem; text-align:center; letter-spacing:2px;}  

.ui-widget-content.ui-menu .ui-menu-item {color: red; font-weight: bold;}
.ui-widget-content.ui-menu .ui-menu-item {color: tan; font-weight: bold;}

the HTML:

<div class = "ui-widget white"><input type = "text" class = "automplete-2"></div>
<div class = "ui-widget black"><input type = "text" class = "automplete-2"></div><br />

How can I have the white player's autocomplete listing left-justified and the black player's autocomplete listing right-justified.

I need text-align:left for black players and text-align:right for the white players — verlager
– verlager, Commented Aug 7, 2017 at 3:53
Looks ok on your test page, unless you want to swap white and black justification, then just switch text-alight: left; with text-align: right; — Icewine
– Icewine, Commented Aug 7, 2017 at 4:17
Not at all... I am using jquery autocomplete... and I want that list to be alternately right / left justified. — verlager
– verlager, Commented Aug 7, 2017 at 4:43

Louys Patrice Bessette · Accepted Answer · 2017-08-07 05:28:42Z

1

Try the even / odd argument of nth-of-type CSS selector:

.ui-menu:nth-of-type(even) li div{  /* black */
  text-align: left !important;
}
.ui-menu:nth-of-type(odd) li div{  /* white */
  text-align: right !important;
}

edited Aug 7, 2017 at 5:28

answered Aug 7, 2017 at 4:34

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Louys Patrice Bessette Over a year ago

I edited... Since there is some div in between... There were all even using nth-child(even/odd)... So I found nth-of-type is working. ;)

Collectives™ on Stack Overflow

css formatting of jquery ui autocomplete

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related