Creating my own Custom widget in GWT and styling it using my own Custom CSS code

Question

I have created a custom widget, basically an Image and a text label. What must I do so that I can now set the position of the text ( top/left/bottom of the image for example ) using nothing only CSS? I mean what methods would my class need so that the CSS styling can be applied to it?

ie Can I have a css class like so

.ImageAndLabel 
{
     imagePosition: top;
}

Heres my gwt class

    public class ImageAndLabel extends Composite
    {
        private Label label = new Label();
        private Image img = new Image("/images/pinkBackground.png");
        protected final FlexTable contentTable;

        public ImageAndLabel()
        {
            contentTable = new FlexTable();
            initWidget(contentTable);
            label.getElement().getStyle().setFontSize(40, Unit.PX);
            contentTable.setWidget(0,0,img);
            img.setHeight("200px");
            contentTable.setWidget(0,1,label);
            label.getElement().getStyle().setLeft(0, Unit.PX);
            img.getElement().setId("popupImg");
            label.getElement().setId("popupLabel");
        }

        public void setText(String text)
        {
            label.setText(text);
        }
    }

I guess what I'm after is can I create my own Custom CSS codes?

contentTable.setWidget(0, 0, label); contentTable.setWidget(1,1,img); — swamy
– swamy, Commented Mar 14, 2013 at 9:56
I don't mean how do I associate a style class with this class. I mean can I have a style attribute declared as follows { myOwnAttribute: top; } Is this possible? if So how is the value I put in the attribute applied to my widget? — MayoMan
– MayoMan, Commented Mar 14, 2013 at 10:17
I'm not sure it is possible - implement your own css propertys. But may be this will help you stackoverflow.com/questions/2926326/… — A1exandr Belan
– A1exandr Belan, Commented Mar 14, 2013 at 13:55

Suresh Atta · Accepted Answer · 2013-03-14 11:04:05Z

1

You can use flextable method for alignment. example :

  flexTable.getFlexCellFormatter().setAlignment(0, 0, 
      HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);

edited Mar 14, 2013 at 11:04

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

answered Mar 14, 2013 at 10:29

Vikash Rajpurohit

1,5752 gold badges13 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MayoMan Over a year ago

Suppose I want to have a CSS rule that has the attribute { position: imageOnTop; OR position: textOnTop; } what would I have to do to my class so that the above css would make sense or can I not create custon CSS tags?

Vikash Rajpurohit Over a year ago

MayoMan , ImageAndLabel is in flextable , wherever you add your ImageAndLabel it is added inside flextable so you have to apply css to the widget where you are going to add your ImageAndLabel ex: horizontalPanel.add(new ImageandLabel) than apply css to horizomtalPanel

Collectives™ on Stack Overflow

Creating my own Custom widget in GWT and styling it using my own Custom CSS code

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related