Print Page - Styling number spinner and datebox with CSS

I have a web site where I am using jQuery EasyUI number spinners and date boxes.

In order to support Smart Phones, Tablets and Laptops, I am using CSS Media Queries to style based on the screen size.

When I view the page on a tablet (i.e. my iPad) I need to adjust the height of the controls. If I add a 'style="height:20px;width:50px"' to the HTML markup it seems to work.

However, I need to define the width and height in the style sheet and not the mark up. And allow a larger font size. I can't get this to work.

Example: The following works :-

<input id="numberspinner" name="pettargetweight" class="easyui-numberspinner" style="height:20px:width:50px;"

If I remove the 'style=' tag and define the following in the stylesheet, it doesn't work.

#numberspinner {
height:20px;
width:50px;
}

Does anyone have experience or can help me find how I can adjust these sizes for display on the various devices?

The possible solution is to override $.fn.numberspinner.parseOptions function.

Code:

<script>
$.fn.numberspinner.parseOptions = function(target){
var t= $(target);
return $.extend({},$.fn.spinner.parseOptions(target),$.fn.numberbox.parseOptions(target),{
width: t.outerWidth(),
height:t.outerHeight()
})
}

</script>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: twhiter on January 30, 2014, 11:21:13 AM