How to set the width of TextItem in DynamicForm?
Method TextItem#setWidth() is not working as expected.
I have tried DynamicForm#setColWidths() also but still unable to set the width.
Here is my code
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;
public class AgeModelWindow extends Window {
public AgeModelWindow() {
TextItem textItem = new TextItem();
textItem.setWidth(50);
textItem.setLength(3);
textItem.setTitle("Age");
DynamicForm form = new DynamicForm();
form.setNumCols(2);
//form.setColWidths("*", "50");
form.setWidth100();
form.setItems(textItem);
this.setMargin(10);
this.setTitle("Enter your age");
this.addItem(form);
this.setWidth(200);
this.setHeight(100);
this.setLeft(100);
this.setTop(100);
this.draw();
}
}
I solved this issue using css styling on textItem. I don't know why it's not working via code in SmartGWT.
code:
textItem.setCellStyle("textItemAge");
css:
.textItemAge input,.textItemAgeFocused input,.textItemAgeDisabled input,.textItemAgeDisabledHint input,.textItemAgeError input,.textItemAgeHint input
{
width: 50px !important;
}
Related
I'm trying to make a permanent clipped navigation drawer with Material UI as per https://material.io/guidelines/patterns/navigation-drawer.html
Seems that there is a pull request out for this but not yet merged: https://github.com/callemall/material-ui/pull/6878
At this stage I'm trying to override with styles but can not get my left nav (paper) to apply the style marginTop: '50px',
Are there some samples out there on how to achieve this with v1.0.0-alpha.21?
They changed the way you have to override certain styles in v1. The inline styles no longer work. Certain parts of a component can be overridden with a simple className applied to the component. See this link for further details https://material-ui-1dab0.firebaseapp.com/customization/overrides.
Some deeper nested properties of certain components i.e the height of the Drawer can only be accessed by overriding the class itself. In this case the paper class of the drawer element.
This is a simple example
import React, { Component } from "react";
import Drawer from "material-ui/Drawer";
import { withStyles, createStyleSheet } from "material-ui/styles";
import PropTypes from 'prop-types';
const styleSheet = createStyleSheet("SideNav", {
paper: {
marginTop: '50px'
}
});
class SideNav extends Component {
....
render() {
return (
<Drawer
classes={{paper: this.props.classes.paper}}
docked={true}
>
....
</Drawer>
);
}
}
SideNav.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styleSheet)(SideNav);
I have added a Label and a ListBox in a HorizontalPanel as a header of a web page. When I set the left margin of a label and the right margin of a listbox and change the size of the window, their positions change. It would be great if anyone can help me to solve this problem.
HorizontalPanel hp = new HorizontalPanel();
Label label = new Label("Test Program");
label.addStyleName("test-label");
ListBox listbox = new ListBox();
listbox.addItem("test1");
listbox.addItem("test2");
listbox.addStyleName("test-listbox");
hp.add(title);
hp.add(language);
CSS file:
.test-label{float:left}
.test-listbox{float:right}
I tried you code setting the HorizontalPanel to a 100% width. I tried adding margins to the elements and they work fine. Please note i suspect your vanish behaviour might be due to rogue additions
**hp.add(title);**
**hp.add(language);**
Your declarations have label and listbox and you are adding title and language.
Sample Code :
HorizontalPanel hp = new HorizontalPanel();
hp.addStyleName("testWidth");
Label label = new Label("Test Program");
label.addStyleName("test-label");
ListBox listbox = new ListBox();
listbox.addItem("test1");
listbox.addItem("test2");
listbox.addStyleName("test-listbox");
hp.add(label);
hp.add(listbox);
RootPanel.get().add(hp);
CSS
.test-label {
float: left;
margin-left: 10px;
}
.test-listbox {
float: right;
margin-right: 10px;
}
.testWidth{
width: 100%;
}
I am trying to change my celltable alternate rows background colors.
by default they have white and lite blue color .. is there a possibility i can change these colors to lets say white and red..
attached is the screenshot .. you can see a white and blue color rows .. if there is a solution to change these colors.
I am aboe to change color , but it looks like it is changin each cell color and not the complete background , see the attached image , any way i can avoid these white spaces.
this is my css
.cellTableEvenRow {
}
.cellTableOddRow {
background: powderblue !important;
}
.cellTableEvenRowCell {
}
.cellTableOddRowCell {
}
thanks
You have to provide a custom CellTable.Resources instance.
To do that you have to create sub-interfaces of CellTable.Resources and CellTable.Style. In the your custom CellTable.Resources you can add your own CSS file in addition to the default style:
public interface CustomResources extends CellTable.Resources {
#Source({Style.DEFAULT_CSS, "CustomCellTable.css"})
Style cellTableStyle();
}
public interface CustomStyle extends CellTable.Style {
}
Now you can specify your custom style in the CustomCellTable.css:
.cellTableEvenRow {
background: white;
}
.cellTableOddRow {
background: red;
}
To create an instance of your custom CellTable.Resources simply call:
CellTable.Resources res = GWT.create(CustomResources.class)
Now you can give that instance to the CellTable instance using its constructor:
CellTable cellTable=new CellTable(15, res);
15 is the default page but can be changed. CellTable has no constructor with only the resources as parameter. At least the page size has to be specified.
I'd like to set a mouse listener to my Label so that I can change the cursor to a HAND_CURSOR when the user places their mouse over a label.
<g:Label text="Overview" styleName="left_menu_title" ui:field="lb_overview"/>
I tried to set style css "cursor: hand;" for this Label, but when run, all attribute cursor were replaced.
Do you have any suggestion?
The answer provided by user1557828 will in fact cause the Label to show the cursor when the mouse is over it, but there is a simpler way to achieve the same result:
Label testLabel = new Label("Text Goes Here);
testLabel.getElement().getStyle().setCursor(Cursor.POINTER);
This will set the cursor at instantiation and the style will persist. It is not necessary to re-apply the style each time the mouse moves over the label.
The proper way to do it would be:
.left_menu_title {
cursor: pointer;
}
and
<g:Label text="Overview" styleName="{style.left_menu_title}" ui:field="lb_overview"/>
where to this one..
Label testLabel = new Label("Text Goes Here);
testLabel.getElement().getStyle().setCursor(Cursor.POINTER);
in my code provided below..
{
xtype:'label',
text:'testLabel',
id:'cancel1',
Label testLabel = new Label("Text Goes Here);
testLabel.getElement().getStyle().setCursor(Cursor.POINTER);
listeners : {
render : function(d) {
d.getEl().on('click', function(){ this.fireEvent('click', d); }, d);
}
}
}
You have only to do the following :
.left_menu_title {
cursor: pointer;
}
If you want a code to do other thing than set cursor to pointer :
import com.google.gwt.dom.client.Style.Cursor;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.ui.Label;
...
...
...
final Label testLabel = new Label();
testLabel.addMouseOverHandler(new MouseOverHandler() {
#Override
public void onMouseOver(MouseOverEvent event) {
testLabel.getElement().getStyle().setCursor(Cursor.POINTER);
//TODO: any thing you want
}
});
Does anybody know how to make a CellList oriented horizontally? If possible, please with UiBinder, but this is not necessary.
Following Thomas Broyer's suggestion on the google-web-toolkit group, and How to style GWT CellList?, we can inject a new CSS resource into the CellList constructor.
The CSS for getting the horizonltal formatting MyCellList.css:
/* This file is based on the CSS for a GWT CellList:
* https://gwt.googlesource.com/gwt/+/master/./user/src/com/google/gwt/user/cellview/client/CellList.css
* The primary purpose is to arrange for the <div> elements that contain each cell to be laid out inline (horizontally).
*/
/* Using inline-block, following Thomas Broyer's recommendations (with link to justification) here:
* https://groups.google.com/forum/#!topic/google-web-toolkit/rPfCO5H91Rk
*/
.cellListEvenItem {
display: inline-block;
padding: 5px;
}
.cellListOddItem {
display: inline-block;
padding: 5px;
}
Define a new Resource like this:
public interface MyCellListResource extends CellList.Resources {
public static MyCellListResource INSTANCE = GWT.create(MyCellListResource.class);
interface MyCellListStyle extends CellList.Style {}
#Override
#Source({CellList.Style.DEFAULT_CSS, "MyCellList.css"})
MyCellListStyle cellListStyle();
}
Inject the new style, and pass it CellList's constructor:
MyCellListResource.INSTANCE.cellListStyle().ensureInjected();
CellList<Fare> cellList = new CellList<Fare>(cell, MyCellListResource.INSTANCE);
Note that the new style appears in the cascade after the DEFAULT style for CellList, so you need only put the modifications you require into your MyCellList.css.
Try to override the CellList.renderRowValues method. You have to be able to create a horizontal presentation template.
There is a lot of logic in that method I didn't want to reproduce, but my hacky solution of just replacing all div's with span's worked:
public class HorizontalCellList<T> extends CellList<T> {
public HorizontalCellList(Cell<T> cell) {
super(cell);
}
#Override
protected void renderRowValues(
SafeHtmlBuilder sb, List<T> values, int start, SelectionModel<? super T> selectionModel) {
SafeHtmlBuilder filteredSB = new SafeHtmlBuilder();
super.renderRowValues(filteredSB, values, start, selectionModel);
SafeHtml safeHtml = filteredSB.toSafeHtml();
String filtered = safeHtml.asString().replaceAll("<div", "<span").replaceAll("div>","span>");
sb.append(SafeHtmlUtils.fromTrustedString(filtered));
}
}
A variant with CSS - set CSS class name on you cell list
CellList<T> list = new CellList<T>(...);
list.addStyleName('myList');
then apply CSS rule to the cells to make them align horizontally:
.myList > div > div > div {
display: inline;
}
I'm able to solve this by extending CellList and creating my own template + overriding the renderRowValues method. Simply changing divs into spans didn't do the trick for me maybe it was because I have custom cells (each cell is rendered as table). Adding display:inline on the CSS didn't work for me also.
My template code is pretty much the same as the original except I added the "float:left;" style:
interface Template extends SafeHtmlTemplates {
#Template("<div onclick=\"\" __idx=\"{0}\" style=\"float:left;\">{1}</div>")
SafeHtml span(int idx, SafeHtml cellContents); ...
Here's a snippet of my renderRowValue method:
int length = values.size();
int end = start + length;
for (int i = start; i < end; i++) {
SingleKeyValueModel value = values.get(i - start);
//super.renderRowValues(sb, values, start, selectionModel);
SafeHtmlBuilder cellBuilder = new SafeHtmlBuilder();
Context context = new Context(i, 0, getValueKey(value));
cell.render(context, value, cellBuilder);
sb.append(TEMPLATE.span(i, cellBuilder.toSafeHtml()));
}