CODEWITHSUNDEEP
cssgwtpolymervaadinvaadin-grid
JackSie
JackSie

Reputation: 87

GWT Polymer Vaadin grid horizontal scrollbar

I'm using https://github.com/vaadin/gwt-polymer-elements

Vaadingrid is really good.

This time I have a trouble about horizontal scrollbar of vaadingrid.

If the width of the content wider than the width of the browser.

When using on Macbook(TOUCH PAD), Mobile device it works fine.(like the image below)

https://i.sstatic.net/Dhkma.jpg

However, when using it on computer(with MOUSE), it can't be scrolled.

No default horizontal scrollbar is shown up.

,,,

I tried to set "visibility: visible".

http://imgur.com/XwqpPRV

But it will always be overwrite by element.style

https://i.sstatic.net/JkCsN.jpg

Hope someone can help me out.

Upvotes: 0

Views: 373

Answers (1)

Panachovo
Panachovo

Reputation: 21

I have found this fix:

You can edit vaadin-grid.html(located /bower_components/vaadin-grid/) and change this:

.vaadin-grid-tablewrapper {
  box-sizing: border-box;
  overflow: hidden;
  outline: none;
  position: absolute;
  z-index: 5;
}

for this:

.vaadin-grid-tablewrapper {
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  outline: none;
  position: absolute;
  z-index: 5;
}

This is valid for me because vertical scroll can be used with mouse scroll.

I'm new in polymer and I don´t know how to modify css child element from parent, and that is the reason because I'm modifing the vaadin source directly.

Upvotes: 1

Related Questions