0

I'm trying to style a UIImageView using pixate 2.0.1.

Without styling the image looks like this:

enter image description here

After applying the style bellow I get this output:

enter image description here

.image-photo{
   border: 1px solid #0c0;
   border-radius: 45px;
}
fnxpt
  • 434
  • 3
  • 13
  • I have the exact same issue here. Setting borders and radius in images actually replaces the UIImageView.image by a new one. This is a terrible approach because then we lose the previously loaded image, and it also does not mask to the radous shape. Any solution found so far? – Angel G. Olloqui Jan 24 '14 at 10:52
  • I created the issue in their Github page, lets see if they have a solution... https://github.com/Pixate/PixateFramework/issues/3 – Angel G. Olloqui Jan 24 '14 at 11:03
  • If anyone interested, I hacked into the Pixate library to add the cornerRadius property into views that have the border-radius css style. You can include it by adding this into your porject https://gist.github.com/angelolloqui/8976802. I have not tested it with images, so if it doesnt work you probably need to change PXUIView by PXUIImageView – Angel G. Olloqui Feb 13 '14 at 15:15

2 Answers2

0

Even though the documentation says you can apply border-radius and other border effects to UIImageView, I don't think you really can without losing your image.

I recommend placing a UIView there, assigning it a styleClass and then putting your UIImageView inside it. You can then reliably apply styles to the UIView and get the background and border effects you want around the image.

Update

There is also an issue with your CSS syntax. Pixate doesn't support the shorthand border notation. You have to write it like this:

.image-photo{
  border-width:1px;
  border-color:#0c0;
  border-style:solid;
  border-radius:45px;
}

Again, this has to go on a UIView that contains the UIImageView.

Clifton Labrum
  • 13,053
  • 9
  • 65
  • 128
  • Thank you for your reply Clifton. It still doesn't work. If I assign the class to a view it works but if I put the image inside the view it doesnt mask to bounds and I get the square UIImageView instead of a UIImageView with rounded corners – fnxpt Jan 16 '14 at 11:20
  • Hi again same issue, if I set those values to the UIview the UIImageView still displays without border-radius. BTW I think that shorthand border notation works, but when it sets the border-radius to the view it doesn't mask the bounds. – fnxpt Jan 17 '14 at 11:12
0

You need set your image via CSS. If you want to do it in code, then you can use the styleCSS property.

pixatepaul
  • 251
  • 2
  • 5