How to change the list background color and borders

[Hawk]

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

[Kateryna Grynko]

Hi Hawk,

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

[Hawk]

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.

[Evgene Karachevtsev]

Hawk,

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

[Hawk]

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.

[Hawk]

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.

[Kateryna Grynko]

Hi Hawk,

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

[Paul Medawar]

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?

[Evgene Karachevtsev]

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

[Paul Medawar]

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?