I'm trying change an OptionGroup to display Horizontal. In vaadin7 book there an example to change with CSS, but doesn't work.
I'm trying this.
//styles.scss
/** optiongroup */
/* Lay the options horizontally */
.v-select-optiongroup-horizontal .v-select-option {
display: inline-block;
}
/* Avoid wrapping if the layout is too tight */
.v-select-optiongroup-horizontal {
white-space: nowrap;
}
/* Some extra spacing is needed */
.v-select-optiongroup-horizontal .v-select-option.v-radiobutton {
padding-right: 10px;
}
//Here the OptionGroup
OptionGroup optionGroup = new OptionGroup();
optionGroup.addItem("Usuário");
optionGroup.addItem("Representante");
Any idea?
As written in the book you need to set a custom horizontal style name:
optionGroup.addStyleName("horizontal");
Related
I'm playing around with GWT using Netbeans and Java. I have several labels and buttons with css styling which are working, however, I have added another label which I cant seem to get the css to work!
final Label numbersLabel = new Label();
numbersLabel.setStyleName("numberLabel");
drawButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int numberTest;
String number;
numberTest = testRandom.testNumbers();
number = Integer.toString(numberTest);
numbersLabel.setText(number);
RootPanel.get().add(numbersLabel);
}
});
Here is the CSS
.numberLabel {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
text-align: center; }
On the button click, the label is displayed however, none of the css is implemented. Any help would be appreciated.
You could just go with:
numbersLabel.getElement().getStyle().setProperty("color", "white");
And so on...
But remember to always write the Style Atrribute Name in CamelCase e.g. font-family = fontFamily
I am using a CustomComponent inside a VerticalLayout in Vaadin. I want to change the style of caption to bold But it is not working.
My calss as below:
public class MyTab extends CustomComponent implements UpdatableComponent {
public MyTab() {
HorizontalSplitPanel panel = new HorizontalSplitPanel();
panel.setSplitPosition(218, Unit.PIXELS);
panel.setFirstComponent(createFirstPanelComponent());
panel.setSecondComponent(createSecondPanelComponent());
panel.setLocked(true);
panel.addStyleName("has_border");
setCaption("This is my title");
addStyleName("padding-bottom-10px");
addStyleName("bold-caption");
}
setSizeFull();
setCompositionRoot(panel);
}
}
I have tried these definitions for "bold-caption" inside my scss file . None of them has worked:
.bold-caption {
font-weight: bolder !important; }
.bold-caption.v-caption{
font-weight: bolder !important;
}
.bold-caption.v-caption.v-captiontext{
font-weight: bolder !important;
}
.bold-caption { .v-caption{
font-weight: bolder !important;
} }
The main question is also how to style caption of custom component in Vaadin inside different layout?
Any solution?
I figured this out.
I used:
.v-caption.bold-caption {
font-weight: bolder !important;
}
Don't forget to remvoe cache and build the application if you are using Vaadin add-ones.
I am using Java GWT to create a UiBinder control. I am having a problem getting the scrollbars to show up. The UI has a master HorizontalPanel containing a left and right flow panels. Each are a assigned three graph widgets of 300x750 pixels for a total of six. There should be horizontal and vertical scrollbars, but they don't appear. If I remove the ScrollPanel, I can get the horizontal scrollbars to appear. I've tried using a FlowPanel instead of a HorizontalPanel, but the left and right flow panel children line up vertically underneath each other. Any help to get this working would be appreciated. I've included the ui.xml and java code below.
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:cw="urn:import:com.caseware.commons.client.ui.widgets"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style type="com.caseware.analytics.client.ResultsWidgets.PreviewMultiGraphContainer.CssStyles">
.wrapper {
height: 100%;
width: 100%;
}
.message {
text-align: center;
font-size: 2rem;
width: 100%;
}
.tablesContainer {
overflow: auto !important;
width: 100%;
height: 100%;
padding: 10px;
}
.tablesContainerHalf {
overflow: auto !important;
width: 100%;
height: 50%;
padding: 10px;
}
.table {
}
.table > * {
display: inline-block;
}
.table + .table {
padding-left: 10px;
}
.table2 {
float: left;
}
.centerItem {
justify-content: center;
}
.drillDownArea {
width: 100%;
height: 50%;
}
.simplePanel {
overflow: auto !important;
}
</ui:style>
<ui:with field="ac" type="com.caseware.analytics.client.i18n.AnalyticsConstants" />
<ui:with field='global' type='com.caseware.commons.client.bundles.StylesBundle' />
<g:HTMLPanel styleName="{style.wrapper}">
<g:ScrollPanel addStyleNames="{style.simplePanel}">
<g:HorizontalPanel ui:field="table" addStyleNames="{global.globalStyles.flexInline} {style.tablesContainer} {style.table}">
<g:FlowPanel ui:field="leftTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
<g:FlowPanel ui:field="rightTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
</g:HorizontalPanel>
</g:ScrollPanel>
</g:HTMLPanel>
</ui:UiBinder>
java file
package com.caseware.analytics.client.ResultsWidgets;
import java.util.List;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Widget;
public class PreviewMultiGraphContainer extends Composite {
private static PreviewMultiGraphContainerUiBinder uiBinder = GWT.create(PreviewMultiGraphContainerUiBinder.class);
interface PreviewMultiGraphContainerUiBinder extends UiBinder<Widget, PreviewMultiGraphContainer> {
}
interface CssStyles extends CssResource {
String centerItem();
String tablesContainer();
String tablesContainerHalf();
}
#UiField CssStyles style;
#UiField HorizontalPanel table;
#UiField FlowPanel leftTable;
#UiField FlowPanel rightTable;
public PreviewMultiGraphContainer() {
initWidget(uiBinder.createAndBindUi(this));
HighChartsInjector.injectHighChart();
table.setStyleName(style.tablesContainer());
}
public void clear() {
leftTable.clear();
leftTable.setVisible(false);
rightTable.clear();
rightTable.setVisible(false);
}
public void addGraphs(final List<Widget> wc) {
for (final Widget w : wc) {
_getTableToAppendTo().add(w);
}
leftTable.setVisible(leftTable.getWidgetCount() != 0);
rightTable.setVisible(rightTable.getWidgetCount() != 0);
table.addStyleName(style.centerItem());
if (rightTable.isVisible()) {
table.removeStyleName(style.centerItem());
}
}
private FlowPanel _getTableToAppendTo() {
if (leftTable.getWidgetCount() > rightTable.getWidgetCount()) {
return rightTable;
}
return leftTable;
}
}
You cannot use HorizontalPanel - or any LayoutPanel - as a child of ScrollPanel, because these panels take their size from a parent. This means that your HorizontalPanel will always be the same height as your ScrollPanel - thus, no scroll bars will appear.
You need to use FlowPanel or similar panel that takes height from their content.
If you want two panels to be displayed side by side, you need to use standard CSS approaches: either use "float" property, or use flex-box CSS on the parent. Flex-box is supported by all modern browsers.
Also, unless you need specific functionality from ScrollPanel, you can simply remove it, and add "overflow: auto" property to your .wrapper style.
I have attached two views of my screen, one is the normal view while the other is when I resize my browser window(or when wrapping takes place).I am using Vaadin , I have multiple CssLayouts within a VerticalLayout.
What actually I am doing is I have a UI class extends CssLayout providing general functionality that I have some items in a drop down. When any of the item is selected , a label is added showing that item is selected,having a cross button which removes the label means that the selection is cancelled. The items will be wrapped when reach the end of the width.
I need the above functionality mutiple times so I am placing these CssLayouts in a Vertical layout which is inside a Panel,therefore, when the height of that vertical layout exceeds the panel's height scroll bars will appear which is fine.
Now the issue is the wrapping, as shown in the view.Due to the presence of multiple CssLayouts .What is desired is that when any css layout wraps the layout below moves down so that they'll not overlap ,as they are doing right now.
Code where I am adding these Css Layouts
public class ProcessUserSelectionPanel extends Panel
{
private List<SelectorUI> processUserSelectors = new ArrayList<SelectorUI>();
private static int SELECTION_LAYOUT_HEIGHT = 38;
private static int MAX_PANEL_HEIGHT = 200;
private VerticalLayout innerLayout ;
protected void initUI()
{
addStyleName("u-proc-user-panel");
setHeight(MAX_PANEL_HEIGHT,Component.UNITS_PIXELS);
innerLayout = new VerticalLayout();
innerLayout.addStyleName("u-proc-user-panel");
innerLayout.setWidth(100, Component.UNITS_PERCENTAGE);
innerLayout.setMargin(true);
setContent(innerLayout);
}
public void updateSelectorPanels(){
innerLayout.removeAllComponents();
processUserSelectors.clear();
int task = 0;
for(int i = 0 ; i < 5 ; i++){
SelectorUI processUserSelector = new SelectorUI();
processUserSelectors.add(processUserSelector);
innerLayout.addComponent(processUserSelector);
task++;
}
}
innerLayout.setHeight((task+1)*SELECTION_LAYOUT_HEIGHT,Component.UNITS_PIXELS );
if((task+1)*SELECTION_LAYOUT_HEIGHT < MAX_PANEL_HEIGHT){
setHeight((task+1)*SELECTION_LAYOUT_HEIGHT+5, Component.UNITS_PIXELS);
}
else{
setHeight(MAX_PANEL_HEIGHT,Component.UNITS_PIXELS);
}
}
Css classes I have used for the label ( having text and cross icon) inside Css layout
.u-selector-panel-big-label{
margin-right:5px;
margin-bottom:5px;
display:inline-block;
border:solid;
border-width:thin;
border-color:rgb(216, 216, 216);
background-color: #EBE2FF;/*#D0C4F0; */
pointer-events: none;
}
.u-selector-panel-heading{
margin-right:20px;
text-align: center;
white-space:nowrap;
display:inline-block;
/* pointer-events: none; */
width:150px;
}
.u-selector-panel-text-label{
margin-right:15px;
text-align: center;
white-space:nowrap;
display:inline-block;
background-color: #EBE2FF;/*#D0C4F0; */
pointer-events: none;
}
.u-selector-panel-icon-label{
text-align: center;
white-space:nowrap;
display:inline-block;
background-color: #EBE2FF;
pointer-events: all;
}
.v-csslayout-container .v-filterselect {
margin-top: 2px;
display:inline-flex;
height: 1.49em;
}
May be I am missing something or not using these correctly.Any help to solve this issue is appreciated.
Cheers
Try giving the width in percentage instead of pixels.
There is an addon called Tokenfield which does solve the functionality you are looking at. Why don't you have look at it? It works great and awesome. Try it if doesn't solve your problem, just let me I will have a look in to it.
I am using GWT FlexTable to show numeric values.
If I use a Label label and setWidget(row,col, label) I can use gwtquery to fade the colors like this:
$(label).css("backgroundColor",color_from);
$(label).animate("backgroundColor:'" + color_to + "'", 5000, new Function() {
public void f(Element e) {
}
});
The effect is a nice fade from "color_from" to "color_to".
I would like to know how I can do this directly on the Tables cell, without having to create a Label for each cell where I want to use this effect. Is that possible?
You can try this.
In your CSS file:
.myTableStyle td {
background-color: #FFF:
-webkit-transition: background-color 5s; /* Chrome, Safari, Opera */
transition: background-color 5s;
}
.highlighted {
background-color: #F00;
}
In GWT:
table.addStyleName("myTableStyle");
table.getFlexCellFormatter().setStyleName(row, column, "highlighted");
UPDATED:
To do it in reverse order is a little more complicated:
.myTableStyle td {
background-color: #FFF:
}
.backgroundEffect {
-webkit-transition: background-color 5s; /* Chrome, Safari, Opera */
transition: background-color 5s;
}
.highlighted {
background-color: #F00;
}
In GWT:
table.getFlexCellFormatter().setStyleName(row, column, "highlighted");
table.getFlexCellFormatter().addStyleName(row, column, "backgroundEffect");
table.getFlexCellFormatter().removeStyleName(row, column, "highlighted");