List - Data Filter visibility and Split Button

Tue Feb 25, 2014 3:14 pm

I have a List component and have checked to include Data Filter. I have deselected Visibility on the List component, because I control that with Javascript depending on events. However, the Data Filter input is visible even when the List is not. It is totally out of place when the List is not visible. How can I hide the Data Filter, and show it only when the List is visible?

Note: When the Data Filter is added, the margin at the top of the List is not enough - the Data Filter is on top of the component above the list. That is easily remedied by increasing the bottom margin on the above component, but I think this is a design flaw.

Also, I have checked Split Button and have changed the Button Icon. However, neither of those take effect. Is that is because I have added several Label components to the List item component? (I see that the Text also disappears when I add a Label.) The list items are generated dynamically from a REST service. I suppose, rather than have labels, I could have my service just create HTML code and use that as the Text of the List item.

Is there a way to have an icon on the Split Button that is not in the drop down list? I have CSS code to create an image, if I knew what the name of the class should be.

If I add an image to the list items and do not have Split Button, is there a way to remove the right arrow on the right side of the List item? Is there a way to move the image to the right side of the List item?

I really like it how the data filter searches every Label component that I have in the list items, and ignores HTML code in the Labels!

Thank you.

Tue Feb 25, 2014 6:11 pm

Hi Fred,

Use this code to hide a filter:pre$(".ui-filterable").hide();/pre
This CSS will hide the arrow:pre[name=mobilelist] a::after{
background:none;
}/preWhere 'mobilelist' is a list name.

Tue Feb 25, 2014 9:38 pm

Hi Katya,
Thanks for the good info. There were two questions you didn't answer, however.

Is there a way to have an icon on the Split Button that is not in the drop down list of icons?

If I add an image to the list items is there a way to move the image to the right side of the List item?

Fred

Wed Feb 26, 2014 10:27 am

Hello!
[quote:]Split Button that is not in the drop down list of icons[/quote]you can custom icons the way you need using CSS (to make it simpler add your own classes for list) http://docs.appery.io/documentation/w...
[quote:]move the image to the right side of the List item[/quote]sure, you can do that using CSS