search

Kitware / paraviewweb

Web framework for building interactive visualization relying on VTK or ParaView to produce visualization data
http://kitware.github.io/paraviewweb/
BSD 3-Clause "New" or "Revised" License
163 stars 51 forks source link

InlineToggleButtonWidget doesn't handle non-square images very well #87

Open mathturtle opened 8 years ago

mathturtle commented 8 years ago

@jourdain I found an annoying issue with InlineToggleButtonWidget in paraviewweb. I was making Patrick's alternate UI for lightviz and I decided to see what it would look like if I made the colormaps use this widget. But the colormaps are 1 pixel high and 256 pixels wide. So when it forces the image to the right height, the width gets scaled too... and the result is a very long horizontal scroll bar. I was looking at fixing it, but I'm not really sure what the right fix should be. A maximum width for the images similar to the height field on the widget? I was able to get a nice look for this widget if I manually edited the CSS in firebug to set max-width to about 80 pixels. I have a branch that add this option, but I don't know how to build lightviz against it to test.

lightviz-toggle-widget-cmap-bug

jourdain commented 8 years ago

I like the screenshot. Let's try to talk on Monday if you can.

TristanWright commented 8 years ago

For images it's best to specify both attributes either inline or through styling: http://codepen.io/tristaaan/pen/zqaaqY?editors=1100

jourdain commented 8 years ago

The idea behind the toggle button when you have an image is to respect its aspect ratio, so you can provide only the height so the image look similar to the rest of the buttons.

On Wed, Apr 20, 2016 at 7:19 AM, TristanWright notifications@github.com wrote:

For images it's best to specify both attributes: http://codepen.io/tristaaan/pen/zqaaqY?editors=1100

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/Kitware/paraviewweb/issues/87#issuecomment-212420523