nstudio / nativescript-cardview

:diamonds: :clubs: NativeScript widget for Material Design CardView
MIT License
282 stars 51 forks source link

ios display issue #74

Closed glen-stephens closed 5 years ago

glen-stephens commented 6 years ago

Love the plugin! Only buggy thing is on ios, when drawn in a listview, tapping on the card view treats the card as transparent on ios, even though a background color is explicitly set. Android does not exhibit this behavior. See example image:

cardview

bradmartin commented 6 years ago

Without looking I suspect it's the listview selection behavior of iOS uitableview. You'll want to disable the selection behavior. I can provide the snippet later. Not near computer now.

On Tue, Dec 5, 2017, 6:02 PM glen-stephens notifications@github.com wrote:

Love the plugin! Only buggy thing is on ios, when drawn in a listview, tapping on the card view treats the card as transparent on ios, even though a background color is explicitly set. Android does not exhibit this behavior. See example image:

[image: cardview] https://user-images.githubusercontent.com/32279761/33637406-06a3b072-d9de-11e7-8049-62a6cf987d7b.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bradmartin/nativescript-cardview/issues/74, or mute the thread https://github.com/notifications/unsubscribe-auth/AFulhLstjstXu7DRCokC8eApeYI9kWG-ks5s9dmNgaJpZM4Q3KDx .

glen-stephens commented 6 years ago

Thanks!! Here is what I get if I give my labels a background color, however it would be better to get the card's background color to work.

card2

sittingbool commented 6 years ago

having the same issue outside of listview too. also in earlier versions. if you wrap the content in a layout (I used Gridlayout) and give that a background color it works. Otherwise all the views inside the card will have a shadow. only on iOS

yoat commented 6 years ago

I have my CardViews wrapped in a WrapLayout with an explicit background color and still had the text-shadow issue on iOS.

`

` Is that what @sittingbool is describing? Any suggestions (maybe a different layout or something)? I'm using Angular with NativeScript and everything looks as expected on Android.
MichaelMarner commented 5 years ago

Here's a workaround if you are running into this trying to have CardView inside a ListView. Assuming Angular, use an ElementRef to access the ListView inside your component, and then disable allowsSelection. eg:

Component.ts

export class MyComponent {
  @ViewChild('list') set list(l) {
    if (l && l.nativeElement.ios) {
      l.nativeElement.ios.allowsSelection = false;
    }
  }
}

Component.html

<ListView #list>
  <CardItem>...

The underlying UITableView on iOS trying to allow selection of the card is what is causing the background to become transparent.