1
Border radius doesn't work (to make image circular) with the "Large item list item"
complete
S
Steve Stava
Border radius doesn't work (to make image circular) with the "Large item list item" component (border radius does work with "Card with large image" component).
Border radius also does not work in the Image component when it is separate from the "Large item list time".
You can see a little bit of the circular border behind the image. It appears as if the square image is sitting on top of the round border that is created based on the border radius.
I compared the same app between the new Appgyver emulator (v2.4.21) and AG Legend. It works as it previously did in AG Legend and doesn't work in v2.4.21.
Log In
Activity
Newest
Oldest
Kristian Gerkman
complete
S
Steve Stava
@Kristian Gerkman: I figured out what the problem! At first, I did try restoring the original Large Image List and it still didn't work :( I did a Rollback to the version before restoring the Large Image List. I then changed the component's Image Overflow property from the defaulted "hidden" value to an explicitly selected "hidden". I did this by selecting "visible" and then reselecting "hidden". As a visual it goes from a light grey to a black font color for the "hidden" value. This made it work!
It appears that the defaulted "hidden" overflow value isn't used. You have to unpick it and then re-pick it to get it to be used in the UI rendering. If my understanding is correct it would be great to have the defaults for the properties be applied and not have to unselect/reselect them. Thanks! :)
H
Harri Sarsa
This should be improved in 2.4.24, can you check once the release is out later today?
S
Steve Stava
@Harri Sarsa: Not improved in 2.4.24.
S
Steve Stava
This shows an AG Legend screen shot (circles for images) and an AppGyver 2.4.24 screenshot (squares over a circle border)
S
Steve Stava
@Harri Sarsa This screenshot has a highlighted div that is wrapped around the "div > img" combination that is the image area. The highlighted div does not contain the css class " r-1udh08x". This css class has the "overflow: hidden" that, when added to this highlighted div, applies the effect of rounding the image.
S
Steve Stava
This is the same highlighted div as the previous reply, but with the css class "r-1udh08x" added. You will see that the top item in the list has the correctly formatted image.
Kristian Gerkman
@Steve Stava: For some reason I'm not able to replicate this.. Could you provide your app's ID so I can take a look at your app and the configurations?
S
Steve Stava
@Kristian Gerkman: Here it is: 136322 Thanks!
Kristian Gerkman
@Steve Stava: Hey, I copied the large list item's configuration to a separate app and I can't replicate this.. Is there any way for me to get past the login screen so that I can see the images in your app?
S
Steve Stava
@Kristian Gerkman: were you able to see the issue using the login? Let me know if you need any additional info.
S
Steve Stava
@Kristian Gerkman: I created a new app and tested the border radius in the large image list. It works if I create a new app...It looks like there must be something about a pre-new-client-runtime app that has a problem with the border radius in the new client runtime world. I don't know that I can "upgrade" my pre-new-client-runtime app to get around this problem...any thoughts?
S
Steve Stava
@Kristian Gerkman @Harri Sarsa Any thoughts on how I can convert an entire app to the new client runtime to eliminate these issues?
Kristian Gerkman
@Steve Stava: Hey, sorry about the delayed answer! The problem seems to be that you made some edits to the
Large image list item
before the 2.X update, and thus it's not version controlled anymore. What you can do is, in composer, update the Lists
components from the marketplace (should be under the updates tab), then open the affected Large image list items in isolation mode and press the circle arrow icon that says "Discard all changes and revert back to the installed version of this view component", unfortunately this will most likely discard your styles and other edits, so you'll have to add those back in manually. Then the issue should be fixed! Sorry about the inconvenience.Kristian Gerkman
@Steve Stava, I completed this issue since the underlying issue has been solved, ping me if the instructions above are not working or if they are unclear!
Kristian Gerkman
under review
Kristian Gerkman
Do you have the border style set to
none
? Or does this happen also if the border is set to solid?S
Steve Stava
@Kristian Gerkman: The border style is set to Solid. Thanks! You can see the circular border behind the image. It just has the square image overlaying the border.