Styling an image

Hey all, not too sure what i’m doing wrong here. All I want to do is add some padding to the bottom of an image which is put in a vertical layout, and for whatever reason, I cannot get it to work.

I define my FileResource and create my image, and set a style name: FileResource companyIconFile = new FileResource(new File(basepath + "//WEB-INF//images//logo.png")); Image companyIcon = new Image(null, companyIconFile); companyIcon.addStyleName("companyIcon");
I then add the image to a vertical layout.

In the CSS, I want to add some padding, so the image doesn’t butt up against the next thing I add to that layout, so I tried this (which didn’t work):

.v-image-companyIcon { padding-bottom: 30px; } I also tried this, but it didn’t work either:

.companyIcon {
    padding-bottom: 30px;
  }

I am sure i’m just missing something very basic at this point, but i’ve been messing with it for a few hours now, and can’t get anything to work properly. Any help would be greatly appreciated.

Hello Adam,

It should work, did you try clearing your browser cache. Also, append ?restartApplication to your browser and try. BTW, the first one(css class) with
.v-image-companyIcon
itself should work.

Thanks,
Krishna.

I have deleted browser cache, installed a brand new browser and tested on that, and tried with ?restartApplication. Nothing worked.

Hello Adam,

It actually worked with the following piece code

        Image image = new Image();
        image.setSource(new FileResource(new File("images/myImage.gif")));
        image.setStyleName("company");
        layout.addComponent(image);

And in my styles.css I have added some thing like this

.v-image-company{ padding-bottom: 30px; } It worked pretty fine.

Just as word of caution, do you have sufficient space in your VerticalLayout so that you can set your image padding-bottom to 30px? say like if your Verticallayout has an height of 20px but if you are trying to set the image’s Padding bottom as 30px it doesn’t work.

Thanks.

I really don’t know what’s going on then. It is not even putting it into the css if inspect it in Chrome. for a quick work around, I just added a blank label with a height manually set to 30px to the vertical layout between the image and anything else. That worked, but is not something I really want to do. I do have the extra space in my vertical layout for it.

Hello Adam,

It would be great if you can provide a strip down version of your code. It would help in analyzing futher!

Thanks