I am using mat-dialog from Angular Material design. When the content is longer the container height, the content in the mat-dialog-content should be scroll.
The scrollbar appears when you scroll down but it disappears after a few seconds. How can I show the scrollbar when the dialog appears? so that users are indicated that there is more content below and they will have to scroll down.
You can do the following in your dialog component constructor to always show vertical scroll on dialog open.
DI Renderer2 to call the setSyle() method on the element
private ren:Renderer2
The CDK overlay is not part of the component and need to grab it from the document.
let el = document.getElementsByClassName('mat-dialog-container').item(0);
Use Renderer2 to call the setStyle() method
ren.setStyle(el, 'overflow-y', 'scroll')
Component
import {Component, Inject, Renderer2} from '#angular/core';
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
#Inject(MAT_DIALOG_DATA) public data: DialogData,
private ren:Renderer2
) {
let el = document.getElementsByClassName('mat-dialog-container').item(0);
ren.setStyle(el, 'overflow-y', 'scroll')
}
Stackblitz
https://stackblitz.com/edit/angular-372fxl?embed=1&file=app/dialog-overview-example.ts
Related
This is using the Vaadin starter project Hello World example. In essence I want to have the scrollbar in the VerticalLayout on the left rather than on the whole page as shown in the image below:
However no matter what I do the scrollbar always appears on the right side. I suspect this may have to do with the AppLayout but I'm not sure how to adjust it so that the scrollbar is on the VerticalLayout shown in the diagram below.
The code is as follows:
add(getHelloVerticalLayout(), new HorizontalLayout(new Button("Simple")));
Where getHelloVerticalLayout() consists of just a bunch of Hello buttons so that it's large enough to generate a scrollbar on the webpage.
private VerticalLayout getHelloVerticalLayout() {
List<Button> buttons = new ArrayList<>();
for(int x=0; x<=50; x++)
buttons.add(new Button("Hello"));
return new VerticalLayout(buttons.toArray(Button[]::new));
}
You can wrap your layout, which needs a scrollbar, with the Scroller component. See the official docs for more information and example https://vaadin.com/docs/latest/ds/components/scroller
I am using angular material, I am scrolling page to middle and navigating from one component to another one but after navigation page not loading from top it is showing in middle. Could any help. Thanks.
I found this, hope it helps
add this in your AppComponent
import { Router, NavigationEnd} from '#angular/router';
and
constructor(private router: Router){
//subscribes every changes of your route
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd){
//scroll to top
window.scrollTo(0,0);`enter code here`
}
});
}
My application is similar to Vaadin Dashboard Demo (please click login after you visit this link). So all my mini dashboard items are wrapped around an abstract component that is of height 300px. One of those items is a Grid wrapped around this 300px height abstract component.
My customer hates it when he sees a large column and .v-grid-cell cuts his cell off:
text-overflow: ellipsis;
So in the #PostConstruct of my Vaadin Grid(and everywhere I mess with the container) i have
this.recalculateColumnWidths();
to alleviate my customer's concern. I tell him he can resize the column but he is not satisfied.
When my container size is small, most of the rows are visible and hence the column widths are perfect. When i have a lot of rows i have to scroll. The column widths are calculated based on the set of initially visible rows. When i scroll down, and if a newly visible row has a large column then the column gets cut off.
I can alleviate my problem by using HeightMode.ROW and make the parent Component a scrolling Panel like:
panel.setWidth("100%");
panel.setHeight("310px");
But I have a lot of action going on my Grid's FooterRow and so i don't want my user to have to scroll to the bottom to see the footers if row size is say 100. As a result my Grid has default HeightMode -> HeightMode.CSS. I like it. It always shows my HeaderRow and FooterRow and scrolls only the rows section of my Grid.
What have i tried:
Give each column humongous size or expand ratio. Customer rejected it.
I tried adding a listener for scroll event unsuccessfully. I used this similar question mentions. I could not get the scroll listener turned on.
ScrollingGrid.java:
public class ScrollingGrid extends Grid{
List<ScrollingGridScrollListener> listeners = new ArrayList<ScrollingGridScrollListener>();
private void fireSrollEvent() {
for (ScrollingGridScrollListener listener : listeners) {
listener.doGridScroll();
}
}
public void addScrollListener(ScrollingGridScrollListener listener) {
listeners.add(listener);
}
#Override
public void beforeClientResponse(boolean initial) {
super.beforeClientResponse(initial);
fireSrollEvent();
}
}`
ScrollingGridScrollListener.java:
public interface ScrollingGridScrollListener {
public void doGridScroll();
}
and in my Grid:
addScrollListener(this);
and
#Override
public void doGridScroll() {
Notification.show("You are scrolling!\nYou can add your own behavior here!");
this.recalculateColumnWidths();
}
I see the notification when page loads. Maybe i should not override beforeClientResponse method in Grid. But I don't know what method to override to achieve a scroll listener.
Help me figure out this scroll listener or if there is another way i can get recalculated column widths on scroll, please let me know.
Thanks for reading this very long question.
Version: 7.6.8
Is it possible to add a buttons in Vaadin 7 to Accordion com.vaadin.ui.TabSheet.Tab caption ?
Right now I can only add a String into Tab caption.
This is my current screen:
I need to add the same Edit/Remove icons(as I have for Live Chat and WMA) near the General and Julia Group tab captions.
Unfortunately it's not possible.
You could create a server-side composition, which behaves like Accordion but then you could design the component so that you can add buttons to tab captions. You could start with something like this:
public class MyAccordion extends CustomComponent {
public MyAccordion() {
VerticalLayout layout = new VerticalLayout();
setCompositionRoot(layout);
// TODO layout should contain all tabs and tab captions
}
}
Another option would be to create an extension by using GWT or Javascript and on the client-side modify DOM so that there a two buttons on tab captions.
I build an app using smartGWT (3.1) (GWT: 2.5).
To hold changes to the various views (scrollbar-position in ListGrids etc.) I add all the views to the main canvas and just change their visibility (show() / hide())
(hide() all children then show() the one which was selected in the menu)
This works fine until I use hichcharts (gwt.highcharts-1.5.0.jar / highcharts.js -> 2.3.5).
no difference if I wrap the Chart in a smartGWT or GWT widget, when I hide the views some elements of the chart stays visible.
Ledgend-background, Ledgend-lines, and some dots from the data-points stays visible. It happens in firefox 18.0.2 and IE 9. In Chrome (24.0.1312.57 m) it works.
I try TabSet aswell. when i switch tabs (which should hide the 'old' tab) the same elements of the chart stays visible.
besides of the visibility-problem the still active Listener from the chart are another problem.
summary:
highcharts chart do not hide proper when parent-widgets hide (in firefox & IE).
For the display issues, and since you didn't provide any code example, I have used the wrapper provided on GWT Highcharts forum. With correct usage of hide/show calls (e.g. when tab is selected or deselected, call show or hide, respectively) I have managed to overcome the issue described in all browsers.
I had the same issue. I solved it by adding a tabSelectedHandler to the tabSet and inside that I show or hide the charts using StockChart.setVisible(boolean) depending on the selected tab.
tabSet.addTabSelectedHandler(new TabSelectedHandler()
{
#Override
public void onTabSelected(TabSelectedEvent event)
{
if (event.getTab().getTitle().equals("Charts"))
{
chart.setVisible(true);
}
else
{
chart.setVisible(false);
}
}
});