CODEWITHSUNDEEP
jquerycssjquery-ui
verlager
verlager

Reputation: 876

css formatting of jquery ui autocomplete

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.

Upvotes: 0

Views: 428

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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;
}

Upvotes: 1

Related Questions