How to add icon near text in TextArea in GWT? - java

I have text area with text (some help tip) and I want to add info icon before text in order it looks like:
icon -----
----------
----------
-----.
*icon: help icon
*---: help text
If it is impossible to add icon to TextArea, maybe there're any other solutions on how to do it (in a label?)?


You can't add an icon to the TextArea. You can show an icon on top of a TextArea in a specified location (by adding both icon and TextArea to a div and using relative positioning), but then it will obscure the text under it as users type it in.


You only need CSS directives :
.yourClass {
background-image : url('yourImage.png');
background-repeat : no-repeat;
padding-left : 30px;
}
.yourClass is the CSS class to set on your TextArea.
30px corresponds to the image width to avoid the text to be positioned on it.

Related

Codenameone How to change Picker Text color

Picker has two components :
The Initial/Selected value displayed in Codenameone UI.
The Native picker dialogs/sheets.
It makes sense that we can not control the theme/color/style of Native Pickers as they are influenced by an OS-specific theme selected by the user.
But how do we change the color of text inside the picker in Codenameone Interface?
What I want to do in the following screenshot is to make the texts "3/20/20, 00:00, & 0-5 persons" white.
What I tried :
Channing the "Label" font-family in CSS changed the font so I tried changing the "color" from CSS but it didn't help.
I tried changing the foreground color like this : timePicker.style.fgColor = 0xfffff
In CSS I defined a style.
DropdownStyle{
background-color: #333333;
color: #FFFFFF;
}
Then I set the style to picker
datePicker.uiid ="DropdownStyle"
But none of the above ways worked as expected.
What is the right way to do it? I believe I am missing a very simple thing but I couldn't find it myself.

AS #shai-almog suggested, after digging through Component Inspector, I found out that
A PickerComponent has the ID "TextComponent" so if we replace the UIID of PickerComponent it's going to change the style of just the Holder Component that's why I was able to change the background-color only but not the text.
Inside it, there is Picker which Represents the Text and has the id TextComponentField.
So I had to Style them individually like this :
TextComponent{
background-color: rgba(0, 0, 0, 0.0);
}
TextComponentField{
color: white;
}
Output :

GWT How to Layout Widgets within a Panel using CSS

I have two labels, two datepickers, and a submit button within a DockLayoutPanel. I'm trying to just get the button to show up in the center of the panel.
Here is the code I am trying to get just to get the button centered:
Button b = new Button("Submit", new ClickListener()
{
public void onClick(Widget sender)
{
getAwards(text.getText(),text2.getText());
}
});
b.setWidth("80px");
b.addStyleName("gwt-Button");
and within my css:
.gwt-Button{
margin-left:auto;
margin-right:auto;
}
What edits or method do I have to take to actually get this to work?
Edit: For extra information, this button is being added to a DockLayoutPanel

Try:
.gwt-Button{
position:absolute;
left:50%;
margin-left: -40px; /* Width Button /2 */
}

Try disabling the loading of whatever default GWT theme you are using (such as clean) in your gwt.xml file, it may be messing with things, since you're using the same class name.
Alternatively, just use a CSS class name other than "gwt-Button" here.

java gwt draw horizontal line

How can I draw a horizontal line in java gwt, something similar to the '< hr >' tag in HTML? I tried it by using
com.google.gwt.user.client.Element bottomLine = DOM.createDiv();
but that somehow doesn't work in IE...

You can use the HTML widget to add whatever html you want inside your page
HTML html = new HTML("<hr style=\"width:100%;\" />")
rootPanel.add(html); // or add it inside another widget
Or you can use css on Panel and define the border-bottom property (if you have a panel that spans the entire page).

Document.get().createHRElement()?

Set text above image in TextView using HTML

I have a list of Strings that I add to TextViews one by one. The text is html so I can add images within the text.
So my question is... How can I add an Image so that the text appears above it. currently while using HTML.ImageGetter class text is added below the image, not above it:
Here is my Html text to be shown:
myText += "<img src='titles.png'><span> text to be above image </span>";

Please try following code as example(Html text is changed):
myText += "<div style='position: relative;width: 100%;'> <img src='titles.png'><span style='position: absolute;top: 100px;left: 0;width: 100%;'> text to be above image </span></div>";
I referred http://css-tricks.com/text-blocks-over-image/ for checking for css properties.
Hope this is helpful for you.
Thanks & Regards,
Chanchal

you can add a simple alt="texthover" to the anchor tag and it will display the text in the alt in most browsers.
But that is not as good as creating an a.hover class that would display text or a div that has text.
Does that help?

Changing a single element of the widget style

How to change single element of the widget style in GWT. I would like to create new version of TextBox style, so that only the border color changed to red, for example.How to get to the style responsible for the TextBox?
I tried to create new style
.gwt-TextBox.invalid {
border-color: red;
}
but it does not work.

Make sure you add class invalid to your TextBox:
textBox.addStyleName("invalid");
Use CssResource to associate your CSS file with GWT: http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles

Categories

Resources