Picklist from mobile devices

Locked
ybendek
Posts: 99
Joined: 05 Aug 2011, 17:52

16 Dec 2015, 17:18

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
Posts: 4351
Joined: 29 Jun 2013, 12:38

17 Dec 2015, 10:51

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
Posts: 99
Joined: 05 Aug 2011, 17:52

21 Dec 2015, 23:57

aragorn wrote: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
Prime
Posts: 18428
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Dec 2015, 00:28

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

cagatay.civici
Prime
Posts: 18428
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Dec 2015, 00:30

Also try adding a padding-right;

Code: Select all

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

Locked

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests