StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>EDIT:</p> <p>Slightly changing your css:</p> <pre><code>.list-cell:filled:selected:focused, .list-cell:filled:selected { -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%); -fx-text-fill: white; } .list-cell:even { /* <=== changed to even */ -fx-background-color: white; } .list-cell:filled:hover { -fx-background-color: #0093ff; -fx-text-fill: white; } </code></pre> <p>This css produces the following presentation:</p> <p><img src="https://i.stack.imgur.com/Owp0I.png" alt="ListView presentation variant 1"></p> <p>Does this give what you expect?</p> <p>I changed <code>odd</code> to <code>even</code>. The first cell is even, because its index value is 0 (zero). Also <code>-fx-cell-hover-color</code> is not valid. I changed it to <code>-fx-background-color</code> where needed or removed it.</p> <hr/> <p>Original text: (note that this has different interpretation of odd/even)</p> <p>My take would be this: <br/> (I included your requirements in a numbered list for reference in the css. I also made the gradient more obvious and added a green background for even cells.)</p> <pre><code>/* 1. Odd rows with white background color; 2. ListView: when mouse over an item, highlight with a blue shade; 3. ListView: when an item is selected, paint it with a gradient; 4. ListView: when focus is lost from ListView, selected item should be painted with gradient; 5. ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white. */ .list-cell:filled:selected:focused, .list-cell:filled:selected { /* 3:, 4: */ -fx-background-color: linear-gradient(#333 0%, #777 25%, #aaa 75%, #eee 100%); -fx-text-fill: white; /* 5 */ } .list-cell { -fx-text-fill: black; /* 5 */ } .list-cell:odd { -fx-background-color: white; /* 1 */ } .list-cell:even { -fx-background-color: #8f8; /* for information */ } .list-cell:filled:hover { -fx-background-color: #00f; /* 2 */ -fx-text-fill: white; /* 5 */ } </code></pre> <p>This leads to this rendering:</p> <p><img src="https://i.stack.imgur.com/zOuRF.png" alt="ListView rendering variant 2"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload