Correct way to size RangeSelector and contents

[GaryParticipant]

I would like to have a RangeSelector that fills a div (with the markers and axis inside the containing div) and have the selection region contain a chart that fills the selection area.

I noticed that the width/height parameters of RangeSelector are for the selection area and do not appear to include the markers or axis. The markers and axis are placed in the padding area which, by default, are sized “auto”.

1. Setting width/height to ‘100%’ with the default padding results in the RangeSelector extending beyond the containing div by the padding amount.
http://jsfiddle.net/kumWj/13/
2. If I need to manually set the width/height to pixel values to fill the containing div while allowing for the padding, I need to know the size auto padding will select to appropriately size the control.
3. If I create a div inside the RangeSelector div and set the width/height to 100%, the internal div correctly sizes before the widget is created. After the widget is created, the internal div suddenly sizes to the containing div.
http://jsfiddle.net/nQrQp/24/

So my question is, how would it be possible with padding=auto to fill the containing div plus how can the contained chart be sized to fill the selection region without using 100% sizing?

[DimitarParticipant]

Hello Gary,

You can get the width and height of the range selector along with the padding with the jQuery methods .outerWidth() and .outerHeight(). Moreover, we already have an example with jqxChart inside jqxRangeSelector. You can see it here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxrangeselector/javascript-rangeselector-background-chart.htm?arctic.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[GaryParticipant]

Hello Dimitar,

Thank you for your quick reply. Unfortunately, I think you missed the entire point of my question.

> I would like to have a RangeSelector that fills a div (with the markers and axis inside the containing div) and have the selection region contain a chart that fills the selection area.

I need to SET the width and height of the RangeSelector so that it fills the containing div without going outside. I don’t need to know the width and height of it after it is created, I need to know how big to make it when I create it. To know this, I would need to know the sizes that padding:auto will select or approximate them reliably. Theoretically, I could approximate the padding for my initial size then see what the actual size is after creation and adjust appropriately. The problem with the approach is that I do not know if padding:auto will change further after I adjust the internal size.

Furthermore, the chart example you referenced has a fixed size. My second fiddle highlights that it does not appear to be possible to simply use 100% width/height to size the background contents.

This is why I am asking what the recommended approach to this would be since there is no obvious solution.

[GaryParticipant]

One additional note: I did look into using “box-sizing:border-box” to get around some of these issues, but the widget appears to be using “box-sizing: content-box !important;”.

[DimitarParticipant]

Hi Gary,

I am afraid that your requirement cannot be achieved. I think the best possible approach available is to set the padding property to a static value, as in the following example: https://www.jseditor.io/?key=correct-way-to-size-rangeselector-and-contents.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts