grid.setWidth('600px')
.setBorderWidth(0)
.setCellPadding(10)
.setCellSpacing(0)
.setWidget(0, 0, app.createLabel(''))
.setWidget(0, 1, app.createLabel('Not Qualified'))
.setWidget(0, 2, app.createLabel('Directed'))
.setWidget(0, 3, app.createLabel('Skilled'))
.setWidget(1, 0, app.createLabel('Manager'))
.setWidget(1, 1, pmRadio1) // Radio Button
.setWidget(1, 2, pmRadio2) // Radio Button
.setWidget(1, 3, pmRadio3) // Radio Button
.setColumnStyleAttribute(1, "text-align", "center")
I want to center align the radio buttons to the header label "Manager". I have given the text-align as center in setColumnStyleAttribute. But its not working.
Tried the below code also. Not working
var tt = {'text-align': 'center'}
grid.setColumnStyleAttributes(1, tt)
First Column should be left aligned & Sencond column should Center aligned.
See the documentation for setColumnStyleAttribute() method: the attribute name must be in camelCase, so use 'textAlign' instead of 'text-align'.
UPDATE
Since you are populating grid cells with label widgets, you have to apply styles to individual labels using .setStyleAttribute('textAlign', 'center'), or to the cells containing the labels/widgets using grid's .setStyleAttributes(row, column, {attributes}) method.
The .setColumnStyleAttribute(column, attribute, value) method you are trying to use creates a <colgroup> element in the grid's table, and applies styles to specified <col> element in the colgroup. However, most of style attributes are not supported in <col> element in HTML5, including text-align attribute - that's why you see no effect of using this method.
Related
Is there a way to change the style (color, font) of the second header row added to Vaadin 17 grid?
Second header row is added with grid.appendHeaderRow();
You can add whatever component you like to the Header Row.
For example:
Div div = new Div();
// add classes or styles to the Div
HeaderRow headerRow = employeeGrid.appendHeaderRow();
headerRow.getCell(idColumn).setComponent();
Checkout the examples here:
https://vaadin.com/components/vaadin-grid/java-examples/header-and-footer
I tried to develop ui table control with multi select option.
The label of each column is sap.m.Text:
But when i re size the column width, parts from the label text are hide:
It's all because of the "sapUiSizeCozy" class for the multi select option (the checkbox)
When i don't use this "sapUiSizeCozy" class the label text will be OK and wrapped, but, there will no be checkboxex:
I add this css class to the sap.m.Page control
Any help?
I need that the label will wrapped + the checkbox in each row
Thanks!
Edit:
Please see an example in:
Plunker
You can in view.xml file remove the:
class="sapUiSizeCozy"
And re size the Product Name" column to see that the column is wrapping
sapUiSizeCozy sets a fixed height to the table header. The label text is then verticaly centered by sapUiSizeCozy by setting lineheight to the height of the header.
This results in the effect that the label is wrapped but the second row is cut of by the fixed header height.
You can fix that with the following css (see Plunker):
<html:style>
.sapUiSizeCozy .sapUiTable .sapUiTableColCell>* span{
line-height: normal;
vertical-align: middle;
display: inline-block;
}
</html:style>
In a flextable I create rows with buttons in the first column showing the number of each row, and textboxes in other columns.
I would like to reduce space between rows to a minimum.
var btnField = app.createButton(numRow).setId(fieldId).setSize(20, 20)
.setStyleAttribute('marginBottom', 3).setStyleAttribute('marginTop', 0)
.setStyleAttribute('fontSize', 8).setText(numRow));
flextable.setCellSpacing(1).setCellPadding(1); //Minimum distance between rows ??
Problem regarding the buttons is that the texts are not in the middle of the buttons vertically. I cannot reduce the size of the buttons (using .setSize(20, 18) or so) as text will become outside the buttons at the bottom.
What styleattributes should I use to position the text of the buttons in the middle of the buttons vertically, right alligned with a small marginRight? The buttons itself should not exceed the size of the textboxes in order to minimize distances between rows.
If I have to use settings on the flextable, that will be OK as well of course.
Style attributes should be written using camelCase, use fontSize instead of fontsize and you'll get this :
which is nicely centered.
edit : I made a few tests on button text alignment and the results are a bit surprising ...
code and illustration below show that only horizontal alignment is doable on text content and that paddingTop applies but has side effects the other widgets as well
function doGet() {
var app = UiApp.createApplication().setTitle('test buttons');
var btn1 = app.createButton('test Button1').setPixelSize(200,60).setStyleAttributes({'fontFamily': 'serif','fontWeight': 'bold','fontSize':'14pt','text-align':'right'});
var btn2 = app.createButton('test Button2').setPixelSize(200,30).setStyleAttributes({'fontSize':'12pt','textAlign':'left'});
var btn3 = app.createButton('test Button3').setPixelSize(200,16).setStyleAttributes({'fontSize':'8pt','padding':'0px'});
var btn4 = app.createButton('test Button4').setPixelSize(200,60).setStyleAttributes({'fontSize':'8pt','paddingTop':'30px'});
app.add(btn1).add(btn2).add(btn3).add(btn4);
return app;
}
A combination od padding and verticalAlignment can give interesting results, see below :
var btn4 = app.createButton('testButton4').setPixelSize(200,60).setStyleAttributes({'fontSize':'8pt','paddingTop':'30px','vertical-align':'-11px'});
I have a couple of OptionGroups with very long captions that run across the width of the page, which looks very bad. I tried restricting the width of the OptionGroup using setWidth and via CSS, and also tried restricting the width of the parent container; all without effect.
So I made a grid layout with an option group in the first column (spanning all rows), and individual labels for the captions in the second column (one per row). However, in case the captions span multiple lines (which they do in my case), this leads to the radio buttons / checkboxes no longer being aligned to the captions. (Regrettably, I'm not allowed to post images.) For instance,
(o) This is a multiline
(o) caption
This is another multiline
caption
I resolved this by creating one OptionGroup per label, and adding each option group in the first column:
(o) This is a multiline
caption
(o) This is another multiline
caption
Clearly, in case of radio buttons, this means multiple buttons can be selected at the same time, since they are no longer linked via a single OptionGroup. Therefore, I registered listeners which, each time a button is selected, de-select all other buttons. And this brings me to my problem; since this "unchecking" is done at the server side, there will unavoidably be some lag, meaning that for some time, multiple radio buttons will appear selected at the client side.
Any ideas on how to resolve this? I only started working with Vaadin recently, so I'm far from an expert. Is there some simple way of restricting the caption width (some magical undocumented CSS class), or do I need to extend / adapt the client-side widget implementation?
Thanks,
William
What you need is FlexibleOptionGroup add-on.
Here is an example implementation:
#Override
protected void init(VaadinRequest request) {
Container cont = new IndexedContainer();
cont.addContainerProperty("caption", String.class, "");
// very long strings in the following setValue() methods
cont.getContainerProperty(cont.addItem(), "caption").setValue("I have...");
cont.getContainerProperty(cont.addItem(), "caption").setValue("So I ma...");
FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
fog.setCaption("FlexibleOptionGroup:");
fog.setItemCaptionPropertyId("caption");
fog.setMultiSelect(true); // force using CheckBoxes
VerticalLayout fogLayout = new VerticalLayout();
Iterator<FlexibleOptionGroupItemComponent> iter;
iter = fog.getItemComponentIterator();
while(iter.hasNext()) {
// OptionGroupItem part (CheckBox or RadioButton)
FlexibleOptionGroupItemComponent fogItemComponent = iter.next();
// CustomComponent part
Label caption = new Label(fogItemComponent.getCaption());
caption.setWidth(400, Unit.PIXELS);
fogLayout.addComponent(new HorizontalLayout(fogItemComponent, caption));
}
setContent(fogLayout);
}
The above code produces:
I am using Gxt-2.2.3's combox box, when it is rendering in IE7 there is no problem with the alignment, but when it comes to Firefox-4.0.1 have got some selection arrow alignment issues as follows.
By ran the application is firebug mode , came to know that there some default style is applied to this div 'element.style' with value 'padding-left:80px'.
So can any one suggest me why this incompatibility in browsers, and how do i override this style.
code:
private ComboBox<TestModel> comboModel = new ComboBox<TestModel>();
comboModel.setFieldLabel(wrapAlignmentSpan("State"));
ListStore<TestModel> store = new ListStore<TestModel>();
store.add(getModels(new ArrayList<TestModel>()));
comboModel.setDisplayField(TestModel.STATE);
comboModel.setValueField(TestModel.STATE);
comboModel.setLabelStyle("font-weight:bold;width:120");
comboModel.setWidth(100);
comboModel.setStore(store);
and finally i am adding this one to 'FormPanel' as follows:
mainPanel.add(comboModel);
Thanks in advance.
The issue was because of the 'FormLayout' 'label width', there was a 'FormLayout' with the 'label width' of '30px'. So after increasing to '120px' the issue got resolved.
LayoutContainer left = new LayoutContainer();
MdbFormLayout layout = new MdbFormLayout(120);
layout.setLabelAlign(LabelAlign.LEFT);
left.setLayout(layout);
return left;
finally added 'Combo Field' to 'left' container as follows,
left .add(stateField, new FormData(150, -1));
It is because of the label width of the 'FormLayout'. Don't set any label width to the combo field. If it is required check the width of the label text and then set the label width as follows.
//'100' should be calculated based on the width of the label text
formLayout.setLabelWidth(100);