Button height:'100%' problem

[ahmetuzunParticipant]

I was using version 2.8.3 of jqwidgets.

Today I upgraded to version 3.0.3 but the following widget misbehaves with this version:

var newObj = $(\"<div id=\'newcomponent\' class=\'jqx-widget component\' style=\'padding: 8px; position:absolute; width:400px; border-color:transparent\'></div>\").appendTo( $this );
var btn = $(\"<input type=\'button\' value=\'Button\' id=\'jqxButton\' />\").appendTo( newObj );
btn.jqxButton({ width: \'100%\', height: \'100%\', theme: _theme});

In the old version, \”height: \’100%\’\” for the button worked perfectly fine.

With the new version, the height stays at a fixed length and does not fill the container.

[Peter StoevKeymaster]

Hi ahmetuzun,

The problem according to me is the HTML that you use. You add the Button to a container which does not have Height or at least it does not have in the provided code and you want the Button to fit to a container with 0 height. It will fit, but its height will be 0, too. In the previous version, the sizing of the button is exactly the same as in this version. We did not made any changes about that, but if it works for you, you can set the Button’s Size through CSS ‘width’ and ‘height’, too.

Best Regards,
Peter Stoev

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

[ahmetuzunParticipant]

I tried specifying a height for the container but it also had the same result. (Indeed, I had tried it before writing this question.)

However, the following piece of code worked as you suggested:

btn.css(“height”,”100%”);

Although you have not changed anything about the height of the button widget, something else you did may have a side effect.

For example the following alternative also works fine:

var btn = $(“”).appendTo( newObj );
btn.jqxButton({theme: _theme});

But the following has the same problem:

var btn = $(“<input type='button' value='Button' style=’width: 100%; height: 100%’ id=’jqxButton’ />”).appendTo( newObj );
btn.jqxButton({ width: ‘100%’, height: ‘100%’, theme: _theme});

Thank you very much for your help.

[ahmetuzunParticipant]

The following alternative also works fine:

				var btn = $("<input type='button' value='Button' style='width: 100%; height: 100%' id='jqxButton' />").appendTo( newObj );
				btn.jqxButton({theme: _theme});

But the following has the same problem:

				var btn = $("<input type='button' value='Button' style='width: 100%; height: 100%' id='jqxButton' />").appendTo( newObj );
				btn.jqxButton({ width: '100%', height: '100%', theme: _theme}); 

[ahmetuzunParticipant]

Are you going to change this + 2 addition to height in the next version?

[Peter StoevKeymaster]

Hi ahmetuzun,

I removed your post with code from our widget’s source. Please, do not provide such in the Forum or anywhere else and keep using jQWidgets according to the license agreement. If there’s an issue on our side, we will do our best to resolve it. We will check again the particular case. The workaround which you can use for setting the size of a button is through CSS – select the button by ID or CSS Class and set the CSS “width” or “height” property.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ahmetuzunParticipant]

Thank you very much for the great support.

I’m sorry about the license issue you’ve mentioned. It is something which I never thought would violate the license agreement.

[Peter StoevKeymaster]

No problem :). Thanks for the update.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts