webos / enyo: setting button size explicitly for both landscape and portrait. howto?

Question

in webos / enyo, you can set the style field of buttons like so:

var style_DONE = "color: #fff; background-color: #2A4754; width: 92px"

here, i only set the width, and the height is taken care of by VFlexBox, and changes depending on the orientation(landscape/portrait) of the device.

How do i manually specify different sizes based on orientation?

Answer 1

There are lots of different ways you might do this. If you put all your style code in the .css file(s) you can add a class name to the tag of your app (like portrait or landscape) on orientation change and then you would basically have two entries in the .css for a particular class like:

.portrait .myButton {/* styles */}
.landscape .myButton {/* styles */}

Then you would set className: myButton for each one, and so on.

You could also use media queries to determine device-height/device-width.

You could just set max-height or min-height maybe...the world is your oyster!