I want to add scrollbar to my web app so I can see every components on my browser.
Red rectangle in picture below is Grid. Grid is placed inside class that extends VerticalLayout and implements View.
Green color shows my scrollbar which is added to HybridMenu instance.
HybridMenu root = HybridMenuBuilder.get()
.setContent(new VerticalLayout())
.setMenuComponent(EMenuComponents.LEFT_WITH_TOP)
.setConfig(menuConfig)
.build();
root.addStyleName("scrollpanel");
root.setSizeFull();
super.setContent(root); //class extends UI
scrollpanel definition in css:
.scrollpanel > div {
overflow: auto !important;
}
When I reduce height of browser window, menu bar is also being scrolled:
I tried to set scrollbar to VerticalLayout, but it seems like id didn't capture that grid was partly hidden. (I've setted everything in VerticalLayout to full size - How to add scrollbar to Vaadin layout)
//extends VerticalLayout implements View
private void init()
{
this.addStyleName("scrollpanel");
this.setSizeFull();
this.setMargin(false);
grid.setSizeFull();
this.addComponentsAndExpand(grid);
this.setExpandRatio(grid, 0.7f);
this.setComponentAlignment(grid, Alignment.TOP_LEFT);
}
Generally I found some not expected (at least for me) behaviour of components in VerticalLayout. They acts differently according to Layout root
(Example with VerticalLayout as root).
Questions:
How can I avoid hiding part of hybrid menu when scrolling?
Am I missing something about adding scroll panel to this VerticalLayout?
#Edit:
I found that this problem doesn't occurs if HybridMenu content is not fullSized or content is not set.
On the other hand scrollbars are not available without it.
So, creating HybridMenu the way that code below shows, solves problem with scrollpanels, but restores previous problem (layout type doesn't change anything).
AbsoluteLayout test = new AbsoluteLayout();
test.setSizeFull();
HybridMenu root = HybridMenuBuilder.get()
.setContent(test)
.setMenuComponent(EMenuComponents.LEFT_WITH_TOP)
.setConfig(menuConfig)
.build();
Related
I'm using Translucent Navigation bar by adding below attribute to make my app mobile nav menu looks like some Google apps where mobile nav bar is a bit transparent and content will visible through it.
<item name="android:windowTranslucentNavigation">true</item>
But my output is it
I don't want my views to go under it. I just need it when there is More content to scroll on screen like when there is a scrolling activity or in recyclerview. But at the end I need my activity views to not overlap by it.
Any suggestions please...
You may need to apply insets to have space between bottom of the device and navigationbar. RootView is the top layout on xml file.
rootView.setOnApplyWindowInsetsListener { view, insets ->
recyclerview.run {
setPadding(paddingLeft,paddingTop,paddingRight, insets.systemWindowInsetBottom)
}
insets
}
With this snippet you will have transparent navigationbar but your RecyclerView will always be above navigationBar.
And add
android:clipToPadding="false"
flag, this works with RecyclerView, and other scrollable views i guess.
You can check out this medium article or Chris Bane's tivi app to get familiar with insets.
Also put an example on github
What you could try for a static view is:
android:layout_marginBottom="?android:attr/actionBarSize"
If in a ScrollView this obviously won´t work but you can still try to play around wiht different layers inside the xml and fit a margin or padding if needed.
Otherwise it might be helpful if you post your xml file to actually see what you try to implement.
It is possible in both ScrollView and Recyclerview.
If there is scrollview in your Xml file then you should create
two other layout(ex: LinearLayout1 as Scrollview child Layout and
LinearLayout2 as LinearLayout1 child Layout) as a child layouts and
set bottom margin in the Secode child layout(LinearLayout2) same as
your bottom navigationBar height.
Well, here is the example how you can get bottom navigationBar height.
public int getNavigationBarHeight()
{
boolean hasMenuKey = ViewConfiguration.get(getApplicationContext()).hasPermanentMenuKey();
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
if (resourceId > 0 && !hasMenuKey)
{
return getResources().getDimensionPixelSize(resourceId);
}
return 0;
}
Note: The height of the navigationBar is in px. So, you have to set margin of your child layout in px.
For Recyclerview, you can give bottom margin(RunTime) of parent
layout in adapter class for the last item of the recyclerView
same as navigationBar height.
Example:
if (position==adapter_dueModelList.size()-1){// the list item
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT
);
params.setMargins(0, 0, 0, 132);//give margin same as a navigationBar height.
((ViewHolder) holder).linear_layout.setLayoutParams(params);
}
I have a JavaFX application using gradle. I have used an Accordion as container for my TitledPane for my menu. The problem is that I can't set the TitledPane height according to sum of it's content height.
For example TitledPane 1 has 3 button inside:
So I set the height manually. But for TitledPane 2 I need to set height exactly for 1 button and remove extra blank spaces:
How could I do that? By the way the button border of Accordion gets disappear when I expand any TitledPane. My tress structure of Accordion is:
I have tried using css like:
.accordion .titled-pane {
-fx-fit-to-height: true;
}
or:
.accordion .titled-pane {
-fx-fit-to-height: true;
}
or some other css codes.
I've an E4 application which has a ToolControl, the class that handles the tool control creates a JavaFX button, for some reason the button adds ellipsis and I've no clue why.
Here is the link to the sample application
https://github.com/SDSethia/ColoredButton.git
JavaFX shortens the label automatically, when the size of the control (a button in your case) is too small for the text. This is independent of E4. So if you increase the size of the button, the complete text will show.
I looked at your project and I am wondering why you are using the SWT renderers, although you want to use JavaFX!
If you want to use E4 + JavaFX I recommend to use the e(fx)clipse renderers. This tutorial should get you started: https://wiki.eclipse.org/Efxclipse/Tutorials/Tutorial4
The button needs a layout (I wrapped mine in an HBox) for it to render correctly. Here is the modified code
final FXCanvas canvas = new FXCanvas(parent, SWT.NONE);
button = new Button();
button.setText("FxButton (1)");
button.setStyle("-fx-background-color: #186dee; -fx-text-fill: white;");
final HBox box = new HBox();
box.getChildren().add(button);
final Scene scene = new Scene(box);
canvas.setScene(scene);
This solved the issue.
I have a TabPane which contains two Tabs and is set up in FXML. On initialization I dynamically add an AnchorPane to one of the Tabs. I then set a ListView as a child of the AnchorPane:
AnchorPane questionPane = new AnchorPane();
questionPane.setId("questionPane");
ListView questionList = new ListView();
questionPane.getChildren().add(questionList);
This works perfectly fine. For debugging purposes I gave the AnchorPane an orange background (via CSS) and when I now resize the window, the AnchorPane get's resized as expected.
But as soon as I add the following line to the code, the AnchorPane can only grow and doesn't shrink anymore, resulting in outsizing my window:
questionList.prefWidthProperty().bind(questionPane.widthProperty());
Can anyone please explain, why this line breaks the resizing of the AnchorPane?
Most likely you didn't specify the anchoring of the ListView:
AnchorPane.setBottomAnchor(questionList , 8.0);
AnchorPane.setRightAnchor(questionList , 5.0);
AnchorPane.setTopAnchor(questionList , 8.0);
AnchorPane.setLeftAnchor(questionList , 5.0);
The binding is not needed anymore.
I am learning Java.I just created an application (liked desktop one in c#) by adding some labels,a text view and a button.
Its fun learning this new thing,but i soon encountered an issue ,when u tried to add vertical scrolling to the text view i added on the UI.
I also tried adding vertical scroll to the text area but still my text area is not displaying the scroll bar.
The part of the code created when i added the controls from the panel to the UI is as below:
thisLayout.setVerticalGroup(thisLayout.createSequentialGroup()
.addContainerGap(17, 17)
.addComponent(getJtxtArea(), GroupLayout.PREFERRED_SIZE, 158, GroupLayout.PREFERRED_SIZE)
The code for the function getJtxtArea() is as below:
private JTextArea getJtxtArea() {
if(jtxtArea == null) {
jtxtArea = new JTextArea();
jtxtArea.setBackground(new java.awt.Color(255,255,255));
jtxtArea.setFont(new java.awt.Font("Segoe UI",3,14));
jtxtArea.setWrapStyleWord(true);
jtxtArea.setLineWrap(true);
JScrollPane scroll = new JScrollPane(jtxtArea);
scroll.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS);
}
return jtxtArea;
}
Can anyone tell me why i am not getting the scroll bar on the text view.Thanks in advance.
Note:I am using Eclipse Helios as the IDE and using Jigloo plugin in eclipse for the GUI.
Add the component scroll instead of the jtxtArea. In addition to that, you might also want to resize your JScrollPane.