CSS Classes - Reference


#1

Is there a complete reference of CSS Classes used in Ionic Framework ?

For example at [http://ionicframework.com/docs/components/#card-showcase] I am looking at the following code -

......

now where can I find more detail about the “full-image” class ?

Also, I was trying to make a circular image … how to do that ?


#2

i think this is not documented yet.

if you see something on doc page and you dont know what it does look it up on https://github.com/driftyco/ionic.

about full-image its this:

.full-image {
  width: 100%;
}

#3

I believe images are rectangular… You could make an image look circular by making the corners transparent or using the border-radius CSS property.


#4

Thanks Auro. Thank you so much for guiding me. Cheers!


#5

Hi inportb,

I tried to apply the border-radius CSS property but it did not work.

However, I used Bootstrap 3 CSS file and applied img-circle class and it worked fine.


#6

Have a gander at http://jsbin.com/xeyuxayexaho/edit

I see a circular image (originally square) in Chromium 36, Firefox 31, Android 4.4.4, and iOS 7.1.2 – what do you see?


#7

Hi inportb,

Thank you so much for the link.

This works.

The error was on my end, the images I used had white space around the image which prevented it from displaying perfect circular. Now Implemented your code and it works.

Thank you so much.

Actually I have recently migrated from Actionscript 3.0 to Web Technologies covering HTML-CSS and not deeply conversant with CSS tricks.

Hope to receive your support in future as well.

Thanks again.


#8

instead of using pixels you could also use %.

in my app i’m using 50% so it does not matter which size it is its every time round.


#9

Thank you Auro. Its a great idea. Thanks.

I see that this forum is full with energetic developers who are always willing to extend help and support.

Thank you all.