I have a kendo grid with the Horizontal scrollbar. By default, the position of the scrollbar is at the bottom of the grid.
But my requirement is to show the horizontal scrollbar at top of the grid(Under Grid header).
Is it possible to do it? Please let me know!
Using this answer How to change scroll bar position with CSS?
and modifying it to a scrollable kendo grid using style rule
.k-grid-content,
.k-grid-content table {
transform:rotateX(180deg);
-ms-transform:rotateX(180deg); /* IE 9 */
-webkit-transform:rotateX(180deg); /* Safari and Chrome */
}
will put the horizontal scrollbar on top.
Demo: https://dojo.telerik.com/#Stephen/etIYa
If you are using virtual scrolling, then you will have to change the style rule to compensate as the structure of the grid is different between a scrollable and a virtual scrollable kendo grid.
Related
Currently using Vaadin 23 and was wondering if it was possible to use scroll horizontally within a Grid programmatically, much like some of the built-in functionality with scrolling to the top or bottom row. However, in this case I would like to scroll using a column as reference (while maintaining the current vertical scroll position).
One idea would be to put a component into the column header, and then scroll to that component. Something like:
Grid.Column<SamplePerson> emailColumn = grid.addColumn("email");
Span emailHeaderText = new Span("Email");
emailColumn.setHeader(emailHeaderText);
Button scrollToEmail = new Button("Scroll", e ->
emailHeaderText.scrollIntoView()
);
It doesn't work perfectly, as the header component does not cover the whole column width, but it might be good enough.
Is it possible to set up a Vaadin Grid with details (like in the Item Details example https://vaadin.com/docs/latest/components/grid) to stretch instead of displaying a scroll? I need to let the Grid grow as much as it needs to. Please tell me how to implement it.
P.S
I may only disable the visual scroll with grid.setVerticalScrollingEnabled(false); but it doesn't help with what I'm looking for. I also need to stretch the grid to avoid the grid scrolling at all. I'd like to use the entire page scrolling instead of grid personal scrolling.
There is a flag you can set
setAllRowsVisible
public void setAllRowsVisible​(boolean
allRowsVisible) If true, the grid's height is defined by its rows. All
items are fetched from the DataProvider, and the Grid shows no
vertical scroll bar.
Note: setAllRowsVisible disables the grid's virtual scrolling so that
all the rows are rendered in the DOM at once. If the grid has a large
number of items, using the feature is discouraged to avoid performance
issues.
Parameters:
allRowsVisible - true to make Grid compute its height by the number of
rows, false for the default behavior
I have an ag-grid-react set up with a series of components in place for cell rendering. When my dataset loads the vertical scroll works well but the horizontal scroll isn't obvious unless using a trackpad or horizontal scroll enabled mouse.
I would like to be able to add a scroll bar to the top of the grid as well as the automatically generated one at the bottom?
Has anyone encountered this, come up with as solution?
Thanks in advance.
Note : I found this solution How to add a horizontal scrollbar on top of the ag-grid but seems this is old and not working.
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.
I am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?
Tried...
I have tried making the draggable to be containment: "*tag*" where tag is html or body.
Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.
The problem is solved by making the body - position: static !important. This then breaks the layout.
For reference, here is the jquery-ui draggable page.
Css Layout
I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?
Reproduction of the problem.
Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/
Please click and drag the blue box below the footer to see a black band or a further pink band.
Pass scroll: false to your draggable constructor.
By default the auto-scroll option is set to true, if you don't want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.
Working jsFiddle