I've made layout with simple gwt, but now I want to make label and text field using gxt 3.0.1.
Gxt provides FieldLabel field. Label on the left than TextField on the right.
Can I make it to be, text field than label on right side of the text field.
Current code is `
<g:HorizontalPanel ui:field="hpOne" width="1">
<g:Cell verticalAlignment="ALIGN_MIDDLE">
<form:FieldLabel text="{message.lblTestGroupName}" ui:field="lblTestGroupName">
<form:widget>
<form:TextField ui:field="tbTestGroupName"/>
</form:widget>
</form:FieldLabel>
</g:Cell>
</g:HorizontalPanel>
`
I am not sure if we are on the same plate, but please try this:
<g:HorizontalPanel ui:field="hpOne" width="1">
<form:TextField ui:field="tbTestGroupName" />
<form:FieldLabel text="{message.lblTestGroupName}" ui:field="lblTestGroupName" />
</g:HorizontalPanel>
Lemme know if you are looking for this.
Related
I have a customcell in my xml file, It contains vertical panel which I have hide, But it cause some UI design issue as CustomCell is not hidde. Can anyone tell me how I can hide my customcell?. Thanks in advance.
<g:customCell styleName="width:15%;" ui:field="parentCell"
visible="false">
<g:VerticalPanel visible="false" ui:field="SortVPanel">
<g:Grid width="100%">
<g:row>
<g:customCell >
<g:Label styleName="float-left" wordWrap="false" width="65px" >
<ui:msg key="lblSort"> Sort By </ui:msg></g:Label>
</g:customCell>
<g:customCell styleName="cell-width83">
<c:ComboBoxComponent />
</g:customCell>
</g:row>
</g:Grid>
</g:VerticalPanel>
</g:customCell>
I want to hide the above customcell, which UiField value is ui:field="parentCell"
The g:customCell tag isnt a dom element, but a marker for the g:Grid tag to know which items are cells vs rows. This means you can't add html attributes to it. You also can't give it a ui:field, since it isn't an object at all.
Instead, you put these on the child Widget which lives inside the g:customCell tag, or from your Java code, you can call grid.getCellFormatter() and use the methods there to further format the cell which wraps the widget.
I have a label in my rg.plugins popup page and I want to change the text color of the label when doing an action.
I try to add an id to the label in xaml, but that is not possible. Is there any way to change the label text color from xaml.cs class.
Thanks in advance
Some sample code would help understand what the issues might be. I assume by rg.plugins, you're referring to: https://github.com/rotorgames/Rg.Plugins.Popup so I will answer accordingly.
It looks like it takes standard xaml and displays that in a dialog type popup. Your options for styling should be the same as any other:
Change color directly in xaml. <Label Text="This is some text" TextColor="Blue" />
Change it via a binding. TextColor="{Binding ColorThatIWant}" Where the page's BindingContext has been set to an object that has a public property or binding property of ColorThatIWant. Don't forget to implement INotiftyPropertyChanged if you want forms to react to property changes.
Set the value in code behind. MyLabel.TextColor = UIColor.Blue; where the label has a name value set. <Label x:Name="MyLabel" Text="This is some text" />
Use style dictionaries to set the value. <Label Text="This is some text" Style="{StaticBinding MyLabelStyle}"/> with a style of:
<Style x:Key="MyLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Blue" />
</Style>
I have a table (sap.m.Table) and would like to change the header font to bold, but I'm unable to do that. Here is my code for one of the column definitions in my *.view.xml:
<Column xmlns="sap.m"
hAlign="Left"
width="17em"
>
<Text text="Vendor" />
</Column>
After looking at the API (sap.m.Text), I don't see a way to change the text style and I'm also new to UI5. Could someone point me to where to look for this?
sap.m.FormattedText
Another option is to use sap.m.FormattedText[api] with an inline tag <strong> within the htmlText value.
<Column ...>
<FormattedText htmlText="<strong>My Column</strong>" />
</Column>
Note
In XML, the character < needs to be escaped with <.
Browsers do not guarantee that the text within <strong> is always displayed in bold.
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important. [source]
The element <b> is currently not supported by the FormattedText. On the other hand, <em> is supported to emphasize the text.
sap.m.Label
Instead of sap.m.Text, you can use sap.m.Label which supports "Bold" design.
<Column id="myColumn">
<Label labelFor="myColumn"
design="Bold"
text="..."
wrapping="true"
/>
</Column>
Additionally, enable the property wrapping (available since 1.50) in order to achieve the default behavior of sap.m.Text. Wrapping should be enabled for column headers as recommended by Fiori design guidelines:
Column Headers - Best Practices
Use controls that wrap [...]. Do not use controls that truncate.
Note: If the label is not labeling anything, please try with different controls like sap.m.FormattedText.
I found by chance that using <FormattedText> instead of <Text> creates bold headers. This works without (!) using any additional bold or strong markup in the htmlText of <FormattedText>.
So in your case you would go with:
<Column
hAlign="Left"
width="17em"
>
<FormattedText htmlText="Vendor" />
</Column>
Whether this works seems to be somewhat dependent on the SAPUI5 version and the theme in use.
It works for me on SAPUI5 1.108 with the default theme (no data-sap-ui-theme specified in index.html).
Try like in the Documentation
Create a custom CSS
Add your styleclass to the Control.
I'm trying to use the GWT grid component in uibinder. It works fine until I want to set the width of the columns. The following is what I've tried to do but it doesn't seem to work.
<g:Grid width="100%">
<g:row>
<g:customCell width="20%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
<g:customCell width="80%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
</g:row>
</g:Grid>
You can write some java code in order to do that, example:
grid.getColumnFormatter().setWidth(0, "10%");
grid.getColumnFormatter().setWidth(1, "10%");
Only styleName is taken into account on g:row, g:cell and g:customCell elements.
If you can (i.e. if your grid content is mostly static), avoid using Grid and prefer an HTMLPanel containing an HTML <table>, this gives you much more flexibility.
http://code.google.com/p/google-web-toolkit/source/browse/tags/2.4.0/user/src/com/google/gwt/uibinder/elementparsers/GridParser.java
I have an HTML input element of type select. The height of the element is 28px. Without modifying the element with CSS, the text inside gets automatically vertically-aligned in all browsers except for IE8. In IE8 the select's text is in the bottom left corner of the element.
Does anyone know how to vertically-align the text inside an HTML select element?
Without your html it is hard to know exactly what you are styling. It sounds like you are using something like <input type="select" /> but that isn't actually valid html.
However, to vertically align the text in the middle you need to set the line-height to be the same figure as your height.
So in this case you would need to set line-height: 28px; to match height: 28px;.
For your html I would recommend either using:
<input type="text" /> if you are looking for a standard text input
or
If you are looking for a drop down selection:
<select>
<option value="Test1">Test 1</option>
<option value="Test2">Test 2</option>
</select>