Forum | Appery.io

Hi all!

my goal is to reformat the collapsible component using custom CSS mainly the plus/minus icons with some custom icon, i did managed to set simple changes to a label using JS' CSS command but nothing more then that, this is where i am now:

1. new project with one page and one collapsible name "mobilecollapsblock_1"

2. new CSS file name "myCollapsible":

   /////////////// START OF CSS /////////////////////

   div.myCollapsible .m-ui-corner-all {
   border-radius : 0.1em;
   border-top-right-radius: 0.1em;
   border-top-left-radius: 0.1em;
   border-bottom-left-radius: 0.1em;
   border-bottom-right-radius: 0.1em;
   }

   div.myCollapsible .m-ui-icon-plus{
   background:none;
   background-position: center center;
   border-radius: 0px;
   background-repeat: no-repeat;
   background-image: url('http://www.mricons.com/store/png/1109...') !important;
   }

   div.myCollapsible .m-ui-icon-minus {
   background:none;
   background-position: center center;
   border-radius: 0px;
   background-repeat: no-repeat;
   background-image: url('http://www.mricons.com/store/png/1109...') !important;
   }

   div.myCollapsible .m-ui-btn-up-d {
   background: none;
   border: 0px solid black;
   }

   div.myCollapsible .m-ui-icon-shadow {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   }

   div.myCollapsible .m-ui-shadow {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   }

   /////////////// END OF CSS /////////////////////

3. added "myCollapsible" to "mobilecollapsblock_1" Class Name

4. saved and run

5. feeling dumb.

   any help would be highly appreciated!
   thank you all in advance!
   Ram

1) How do you 'added myCollapsible to mobilecollapsblock_1 Class Name'?
There is no such property in app builder. Try to use this code on Page Load event
Appery("mobilecollapsblock_1").addClass("myCollapsible");
2) In your css file you should use class names without m- prefix.
for example use
div.myCollapsible .ui-icon-minus
instead of
div.myCollapsible .m-ui-icon-minus

YES!!!!!!!

many many thanks!!!!!