Forum | Appery.io

Hi,

In my App, I have the page shown below, it's a list with grid inside. The list is linked to the database and any record added (by taking photo) is adding the list item. I colored the gird. However I need to make the list Items transparent (currently white) and remove the borders of these itmes. I tried the following:

CSS asset:
code
.listClass li a{
background-color:transparent!important;
background: transparent !important;
border: none !important;
}
/code

And:
code
[dsid = mobilelistitem_272] li a{
background-color:transparent!important;
}
/code

And:
code
.C_PhotoList
{
background-color: transparent !important;
border: none !important;
background: transparent !important;
}
/code

given that C_PhotoList is the list class name.

However, the list background remained white.

I also tred on page load to run:

code
Appery('photolist').css({'background-color': 'transparent'});
/code

Nothing has changed!

May I know if I am missing something here?

I deeply appreciate your help

Reproduce the problem:
link: http://appery.io/app/mobile-frame?src...

login credentials: haytham/star1234
Navigate: NavBar- messages -My photo

Hi Hawk,

Please use this CSS: pre[name=mobilelistName] li a{
background:transparent !important;
border:none!important;
}/preWhere 'mobilelistName' is a mobilelist component name.

Hi Katya,

Unfortunately, it did not work. The white background and the borders of the list are still showing. The problem can be reproduced as explained above.

Hawk,

Please try this way:
preli[name="mobilelistitem_272"] {
background:transparent !important;
border:none!important;
}/pre

Hi Evgene. It removed the background and the borders EXCEPT one border at the bottom (see image below). I tried to add the following to the css you advised, assuming it is a shadow. However, it did not work

-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;

I tried that with mobilelistitem and mobilelist. It didnot remove the bottom border.

Hi Evgene. It removed the background and the borders EXCEPT one border at the bottom (see image below). I tried to add the following to the css you advised, assuming it is a shadow. However, it did not work

-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;

I tried that with mobilelistitem and mobilelist. It didnot remove the bottom border.

Hi Hawk,

Please add this: preul[name="photolist"] {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}/pre

Hi,

using the CSS described above

li[name="mobilelistitem_51"] {
background:transparent!important;
border:none!important;
}

this works on the border but not on the background

any ideas why not?

Hello Hawk,

If you want to remove the background and border for all mobilelistitem, please try this css:
pre
[name=mobilelistName] li a{
background:transparent !important;
border:none!important;
}/pre
where mobilelistName is the name of component mobilelist

if any one of them,
preli a[name="mobilelistitem_51"] {
background:transparent!important;
border:none!important;
}/pre

Hi evgene and thanks for the quick response

Ok so firstly I should say I am using jqm swatch B.

Using the two different methods you described above nothing works.

I changed "li a" to "li b"...also doesn't work

I changed "li a" to just "li"...this works in both methods, but only for the border and not the background?