After updating JQM from rc1 to rc3 textbox to the left of the slider has disappeared #3081

Closed
alexavrutin opened this Issue Nov 17, 2011 · 8 comments

4 participants

@alexavrutin

Now I have another, native slider nearby. It only happens if slider is on a page loaded as a dialog. The code did not change, it's shown below (code is ASP.NET MVC3 Razor).

                <div data-role="fieldcontain">
                    @Html.LabelFor(m => m.AgeFrom)
                    <input type="range" name="AgeFrom" id="searchSettings-AgeFrom" min="16" max="70"
    onchange="SearchSettingsChangeAgeFrom();" value="@Model.AgeFrom" />
                </div>
                <div data-role="fieldcontain">
                    @Html.LabelFor(m => m.AgeTo)
                    <input type="range" name="AgeTo" id="searchSettings-AgeTo" value = "@Model.AgeTo" min="16" max="70" onchange="SearchSettingsChangeAgeTo();" />
                </div>
@eddiemonge

Can you test using the 1.0 code?

Also, can you paste the generated markup for those of us who refuse to touch ASP?

One more thing, what device/browser?

@alexavrutin
@eddiemonge

Can you paste it at jsfiddle.com or jsbin.com so we can see a live example

@alexavrutin
@eromba

I've run into this issue myself using jQM 1.0. Slider textboxes are fine on normal pages, but are missing on dialogs. The degradeInputs plugin seems to be the culprit -- it bails early for pages that do not have data-role="page".

The following change fixed the issue for me:

@@ -3649,7 +3649,7 @@ $.mobile.page.prototype.options.degradeInputs = {
 //auto self-init widgets
 $( document ).bind( "pagecreate create", function( e ){

-   var page = $(e.target).closest(':jqmData(role="page")').data("page"), options;
+   var page = $(e.target).closest(':jqmData(role="page"),:jqmData(role="dialog")').data("page"), options;

    if( !page ) {
        return;
@alexavrutin

Yup, it works!

@eddiemonge

Can you submit that as a pull request please?

@eromba eromba added a commit to eromba/jquery-mobile that referenced this issue Nov 21, 2011
@eromba eromba Issue #3081: Range inputs on dialogs don't degrade
The degradeInputs plugin bails early for pages that do not have
data-role="page". This behavior prevented range inputs (for slider widgets)
from degrading properly when used in dialogs.

Updated degradeInputs unit tests to check dialogs, too.
a8c0485
@johnbender

Pull request merged: #3131

@johnbender johnbender closed this Dec 9, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment