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.
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
Hi everyone I have this layout:
Here is the class MainLayout:
public class MainLayout extends VerticalLayout {
/**
*
*/
private static final long serialVersionUID = 1L;
private VerticalLayout upperSection = new VerticalLayout();
private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();
public MainLayout() {
upperSection.addComponent(new Label("Header"));
menuLayout.addComponent(new Label("Menu"));
contentLayout.addComponent(new Label("Content"));
lowerSection.addComponent(menuLayout);
lowerSection.addComponent(contentLayout);
addComponent(upperSection);
addComponent(lowerSection);
showBorders();
setSizeFull();
lowerSection.setSizeFull();
// menuLayout.setSizeFull();
contentLayout.setSizeFull();
setExpandRatio(lowerSection, 1);
//lowerSection.setSplitPosition(30);
}
private void showBorders() {
String style = "v-ddwrapper-over";
setStyleName(style);
upperSection.setStyleName(style);
lowerSection.setStyleName(style);
menuLayout.setStyleName(style + "-menu");
contentLayout.setStyleName(style + "-content");
}
#SuppressWarnings("serial")
public void addMenuOption(String caption, final Component component) {
Button button = new Button(caption);
menuLayout.addComponent(button);
button.addClickListener(new ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
contentLayout.removeAllComponents();
contentLayout.addComponent(component);
}
});
}
}
This layout class extends VerticalLayout and constructs the basic structure of the layout, the addMenuOption method adds a button to the left menu column and a click listener to it so that when the user clicks on the button the content layout on the right should switch its content from the current to the one bound with the button, now inside the init method of the UI:
protected void init(VaadinRequest request) {
MainLayout layout = new MainLayout();
layout.addMenuOption("Option 1", new Label("Component 1"));
layout.addMenuOption("Option 2", new Label("Component 2"));
setContent(layout);
}
Actually the result I obtain is this:
But my problem is that neither of the two buttons (Option 1, Option 2) are clickable.
Where is the problem?
Thanks for the attention!
You are right. Adding style "v-ddwrapper-over" to one of the components makes the buttons non-clickable. Lets take a look at definition of this style in style.css file.
.appName .v-ddwrapper-over:before, .so5 .v-ddwrapper-over:after {
content: "";
position: absolute;
z-index: 10;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 0 solid #197de1;
}
What's important is the fourth line with z-index. This brings a component (more specifficaly div in DOM) to the front covering all others components with less z-index value (usually they have 0).
If you really need this style to be applied to all your components (seems weird to me) consider adding additional style to the buttons with higher z-index value.
Learn more about z-index property here.
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");
I want to bind two tableviews together such that they scroll in sync. How do I do that? I am unable to find out how to access the scrollbar of a tableview.
I've made a CSS hack to bind a Tableview with an external scrollbar. One scrollbar controls both tableviews.
An overview of my idea:
Create two tableviews
Make one Vertical scrollbar. Let's call it myScrollbar in this example
Set the min and max of myScrollbar to size of min=0, max=TableView.Items.size()
When the value of myScrollbar changes then call both tableview's scrollTo(int) function
Disable the native vertical scrollbar of the tableview implemented with CSS.
This will give you two tables, both controlled by one external scrollbar (myScrollbar).
Here is the code to hide the scrollbar of a tableview using css:
/* The main scrollbar **track** CSS class */
.mytableview .scroll-bar:vertical .track{
-fx-padding:0px;
-fx-background-color:transparent;
-fx-border-color:transparent;
-fx-background-radius: 0em;
-fx-border-radius:2em;
}
/* The increment and decrement button CSS class of scrollbar */
.mytableview .scroll-bar:vertical .increment-button ,
.mytableview .scroll-bar:vertical .decrement-button {
-fx-background-color:transparent;
-fx-background-radius: 0em;
-fx-padding:0 0 0 0;
}
.mytableview .scroll-bar:vertical .increment-arrow,
.mytableview .scroll-bar:vertical .decrement-arrow
{
-fx-shape: " ";
-fx-padding:0;
}
/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.mytableview .scroll-bar:vertical .thumb {
-fx-background-color:transparent;
-fx-background-insets: 0, 0, 0;
-fx-background-radius: 2em;
-fx-padding:0px;
}
Then we need to set how to scroll the tableview by using the scrollbar.
scroll.setMax(100); //make sure the max is equal to the size of the table row data.
scroll.setMin(0);
scroll.valueProperty().addListener(new ChangeListener(){
#Override
public void changed(ObservableValue ov, Number t, Number t1) {
//Scroll your tableview according to the table row index
table1.scrollTo(t1.intValue());
table2.scrollTo(t1.intValue());
}
});
http://blog.ngopal.com.np/2012/09/25/how-to-bind-vertical-scroll-in-multi-tableview/
I don't think this is currently possible. TableViewSkin inherits from VirtualContainerBase which has a VirtualFlow field. The VirtualFlow object has two VirtualScrollBar fields, hbar and vbar which is what you're after. I can't see any way of getting to it though.
Interestingly, there is also a private contentWidth field in TableView although this is private. I'm sure that the JFX team are being ultra cautious about opening up too much of the API which is understandable. You could ask to get the contentWidth field opened up as an int property as a feature requestion on the JFX JIRA or openjfx-dev mailing list.
A stop gap measure would be to bind the selected item or index property of the table views selection model.
The easiest way I've found to solve the problem is to bind the valueProperty of the visible an the hidden scrollbars.
// Controller
#FXML private TableView<MyBean> tableLeft;
#FXML private TableView<MyBean> tableRight;
#FXML private ScrollBar scrollBar;
#SuppressWarnings("rawtypes")
private void bindScrollBars(TableView<?> tableView1, TableView<?> tableView2,
ScrollBar scrollBar, Orientation orientation) {
// Get the scrollbar of first table
VirtualFlow vf = (VirtualFlow)tableView1.getChildrenUnmodifiable().get(1);
ScrollBar scrollBar1 = null;
for (final Node subNode: vf.getChildrenUnmodifiable()) {
if (subNode instanceof ScrollBar &&
((ScrollBar)subNode).getOrientation() == orientation) {
scrollBar1 = (ScrollBar)subNode;
}
}
// Get the scrollbar of second table
vf = (VirtualFlow)tableView2.getChildrenUnmodifiable().get(1);
ScrollBar scrollBar2 = null;
for (final Node subNode: vf.getChildrenUnmodifiable()) {
if (subNode instanceof ScrollBar &&
((ScrollBar)subNode).getOrientation() == orientation) {
scrollBar2 = (ScrollBar)subNode;
}
}
// Set min/max of visible scrollbar to min/max of a table scrollbar
scrollBar.setMin(scrollBar1.getMin());
scrollBar.setMax(scrollBar1.getMax());
// bind the hidden scrollbar valueProterty the visible scrollbar
scrollBar.valueProperty().bindBidirectional(scrollBar1.valueProperty());
scrollBar.valueProperty().bindBidirectional(scrollBar2.valueProperty());
}
/*
* This method must be called in Application.start() after the stage is shown,
* because the hidden scrollbars exist only when the tables are rendered
*/
public void setScrollBarBinding() {
bindScrollBars(this.tableLeft, this.tableRight, this.scrollBar, Orientation.VERTICAL);
}
Now you have to call the binding from Application after the stage is shown and the tables are rendered:
// Application
private MyController controller;
#Override
public void start(Stage primaryStage) {
try {
FXMLLoader fxmlLoader = new FXMLLoader(SalesApp.class.getResource("scene.fxml"));
BorderPane root = (BorderPane) fxmlLoader.load();;
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("app.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
controller = (MyController) fxmlLoader.getController();
controller.setScrollBarBinding();
} catch(Exception e) {
e.printStackTrace();
}
}
Now the tables should scroll synchronously via mouse, key, or scrollbar.
Have fun, Olaf
I have a class that extends the smartgwt ImgButton. When the Button is pressed a popup should be shown that contains further buttons. The buttons in this popup should not be rendered like common buttons, but rather like text links - so I applied a custom CSS class. Everything works fine so far. But when I press any of the buttons in the popup, the background of the button gets transparent and the text behind the popup shines through. This is ugly, but I can't find a way to solve this.
Does anyone have an idea how to keep the background color when the button is pressed?
Here is the code:
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
public class MultiButton extends ImgButton {
private PopupPanel popup;
private VerticalPanel content;
public MultiButton() {
super();
popup = new PopupPanel();
popup.setAnimationEnabled(true);
popup.setAutoHideEnabled(true);
content = new VerticalPanel();
popup.add(content);
this.setWidth(18);
this.setHeight(18);
this.setShowRollOver(false);
this.setShowDown(false);
this.setSrc("person.png");
this.addClickHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent event) {
popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
#Override
public void setPosition(int offsetWidth, int offsetHeight) {
int left = event.getX() + 7;
int top = event.getY() + 7;
popup.setPopupPosition(left, top);
}
});
}
});
}
public void addMultiButtonEntry(String name, ClickHandler handler) {
Button b = new Button(popup.getStyleName());
b.addClickHandler(handler);
b.setShowHover(false);
b.setShowRollOver(false);
b.setBaseStyle("nt-multibutton-button");
b.setAlign(Alignment.LEFT);
content.add(b);
}
}
and this is the CSS definition:
.nt-multibutton-button {
border: 0px !important;
color: #657380;
font-size: 11px;
font-weight: bold;
text-align: left;
padding-left: 5px;
width:90%;
background-color: white;
}
Thank you for every hint!
PS: I know it isn't good style to mix SmartGWT and GWT components, but I didn't find a PopUp in SmartGWT and I don't want to code my own.
I just found out how to do it.
I added a style primary name and the style name to the buttons and now it works :)
So the buttons for the popup are now created as follows:
Button b = new Button(name);
b.addClickHandler(handler);
b.setShowHover(false);
b.setShowRollOver(false);
String css = "nt-multibutton-button";
b.setStylePrimaryName(css);
b.setBaseStyle(css);
b.setStyleName(css);
b.setAlign(Alignment.LEFT);
content.add(b);