Picklist from mobile devices

[ybendek]

Hello

Currently I'm facing an issue using the picklist component, I'm using PF5.3 and Rio3.0.

For some reason when I have a list of items with enough number of items to display the scroll bar... If I am using a touch device the list cannot be scrolled and instead only the drag and drop feature can be used, basically the scroll bar is hidden... a very diferent behavior if I try the same from for example a pc, where both features (drag&drop and scroll) works without a problem.

Any advice?

[mert.sincan]

On Mobile, We can override scrollbar's style with Css on Webkit browsers. But, FF doesn't support this feature. Exp;
You can try this css on Mobile - Chrome;

Code: Select all

.ui-picklist .ui-picklist-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 15px;
    background-color: transparent;
}

.ui-picklist .ui-picklist-list::-webkit-scrollbar-thumb {
    border: 1px solid white;
    background: #888;
}

Or you can use a 3nd party API for scroll. (https://github.com/noraesae/perfect-scrollbar, http://manos.malihu.gr/jquery-custom-content-scroller/ etc.)

[ybendek]

On Mobile, We can override scrollbar's style with Css on Webkit browsers. But, FF doesn't support this feature. Exp;
You can try this css on Mobile - Chrome;

Code: Select all

.ui-picklist .ui-picklist-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 15px;
    background-color: transparent;
}

.ui-picklist .ui-picklist-list::-webkit-scrollbar-thumb {
    border: 1px solid white;
    background: #888;
}

Or you can use a 3nd party API for scroll. (https://github.com/noraesae/perfect-scrollbar, http://manos.malihu.gr/jquery-custom-content-scroller/ etc.)

Thanks aragorn... well, now the scrollbar is displayed but is very hard to use it in combination with the drag&drop feature, this component try to drag and reorganize the items... could it be possible to disable the drag and drop feature in picklist?

[cagatay.civici]

Right now no but please create a request at github, it is simple to implement.

[cagatay.civici]

Also try adding a padding-right;

Code: Select all

.ui-picklist-list .ui-picklist-list {
  padding-right: 15px !important;
}