Search jQuery

jQuery Forum

Using jQuery UI

realtebo

Spinner problem

in Using jQuery UI • 9 years ago

I've this rendering problem for spinner. See this picture:

Please note: I cannot update jquery; i cannot update jqueryui.

But i need to debug this issed and understand what's the problem

The Widget is bad-rendered but
- is fully working
- no javascript errors
- Ie9, FF 20, latest Chrome and Safari all looks like this.

Please, help me debug this problem, I've no idea where to start, because of no js errors !

Replies(5)

jakecigar

Re: Spinner problem

9 years ago

Looks like a CSS problem. Is the <input> display:block ?

JΛ̊KE

kbwood.au

Re: Spinner problem

9 years ago

Can you provide a page that demonstrates the problem?

jakecigar

Re: Spinner problem

9 years ago

I can reproduce your layout problem by not adding one of the standard CSS links, and writing a little CSS.

Are you using one if the standard UI css files?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>UI</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function(){
$( "input" ).spinner()
})
</script>
<style>
input~*{display:block;}
</style>
</head>
<body>
<form>
<div>
<span>Widget width</span><input>
</div>
</form>
</body>
</html>

JΛ̊KE

realtebo

Re: Spinner problem

9 years ago

The INPUT has display:block.

I cannot give you a demo-page because i'm working on a next-feature for daduu.com and so it's not available from external, and when I use it on a clean page, everythings work wel..

We're heavily using Twitter Boostrap and a BIG flavour of JS library, but in this page only Twitter Boostrap (js + css) is loaded, so I cannot direct update jQuery/jQueryUI.

This is the problem: I need to understand which CSS style is breaking all, to override them in the specific page, then I'll open a ticket to twitter bootstrap or (more probably) I'll patch it and open a pull request. If the problem i twitter bootstrap... I've no idea how to proceed to debug.

See HTML generated

<input style="display: block !important;" value="95" class="span1 ui-spinner-input" id="OptInWidgetForm_widget_width" name="OptInWidgetForm_widget_width" aria-valuenow="95" autocomplete="off" role="spinbutton">

jQuery Version: v1.8.3
jQueryUI: v1.9.2

I tried to DISABLE loading of boostrap css(es) , responsive csses, etc.. but nothing changes !

jakecigar

Re: Spinner problem

9 years ago

I am sorry you can't share any code that might be giving a you this problem. You will have to keep trying…

By the process of elimination, find out where you are adding display: block !important, then stop doing it.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Spinner problem

Replies(5)

Re: Spinner problem

Re: Spinner problem

Re: Spinner problem

Re: Spinner problem

Re: Spinner problem

Statistics

Tags

Actions

Related Posts