Search code examples
htmlcsssencha-touchsencha-touch-2

Selection bar implementation in xtype-selectfield same as datepickerfield

In Sencha touch version 2.3.0 we have xtype:'datepickerfield' for which we have a default bar that indicates the selected date.

Blue line indicates selected date

This selection blue bar can be modified using following css property.

.x-picker-bar {
  background: rgba(247, 109, 48, 0.6);
}

datepickerfield with changed CSS

Now we have another component with xtype:'selectfield'. I want to implement this bar to this component as well. How can this be implemented? Any suggestions?

enter image description here

Solution

  • Below css will serve your purpose Pushkar:

    .x-picker-slot .x-dataview-item.x-item-selected {
    background: rgba(247, 109, 48, 0.6) !important;
}

    Let me know it helps or not.