jQuery मोबाइल पैनल केवल Android ब्राउज़र पर

JSFiddle पूरी तरह से बंद नहीं होती है: http://jsfiddle.net/nbh1rn33/jQuery मोबाइल पैनल केवल Android ब्राउज़र पर

मैं jQm पैनल के साथ एक अजीब समस्या है।

एक खोला गया पैनल पूरी तरह से बंद नहीं होता है। छवि के नीचे देखें:

enter image description here

अजीब, यह केवल Android ब्राउज़र पर होता है, और पीसी (क्रोम, आईई) पर नहीं।

क्या यह jQm के साथ एक बग है या मैंने कुछ गलत किया है?

jQuery यूआई बग की तरह

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
    <div data-role="page"> 
     <div data-role="header" data-position="fixed" > 
      <h1>Test Page</h1> 
      <div data-type="horizontal" data-role="controlgroup"> 
       <a href="#search_condition_panel" id="search_condition_btn" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-grid">Show Options</a> 
      </div> 
     </div> 
     <div role="main" class="ui-content"> 
     </div> 
     <div data-position-fixed="true" data-role="panel" data-display="overlay" id="search_condition_panel" data-position="right"> 
      <div class="ui-field-contain"> 
       <label for="search-condition-select-brand">Brand</label> 
       <select id="search-condition-select-brand" name="search-condition-select-brand" data-mini="true"> 
       </select> 
      </div> 
     </div> 
     <div id="datepicker"></div> 
    </div> 
</body> 
</html>

स्रोत

2015-06-03 l46kok

आपका कोड मेरे नेक्सस एंड्रॉइड 5.1.1 पर ठीक काम करता है आप किस ब्राउज़र और ओएस संस्करण पर कोशिश कर रहे हैं? – chrana

गैलेक्सी एस 4 एंड्रॉइड 4.4.2 डिफ़ॉल्ट ब्राउज़र। – l46kok

मैंने क्रोम में सैमसंग एस 4 के रूप में अपने पीसी पर वेबसाइट को अनुकरण करने की कोशिश की, इस मुद्दे को पुन: उत्पन्न करने में कोई सफलता नहीं मिली। मैंने सफलता के बिना अपने नोट 4 पर स्टॉक ब्राउजर की भी कोशिश की। क्या यह आपके फोन पर अन्य ब्राउज़रों में भी हो रहा है? –

देखो, 1.4.2 के लिए यह reproduced नहीं किया जा सकता है और यह 1.4.5 के लिए reproduced। पर टेस्ट मेरी Galaxy S4

अपने मामले में मुख्य अंतर यह वर्ग .ui-panel-closed की сss गुण में है:

/* 1.4.5 */ 
.ui-panel-closed { 
    width: 0; 
    max-height: 100%; 
    overflow: hidden; 
    visibility: hidden; 
    left: 0; 
    clip: rect(1px,1px,1px,1px); 
} 
/* 1.4.2 */ 
.ui-panel-closed { 
    width: 0; 
    max-height: 100%; 
    overflow: hidden; 
    visibility: hidden; 
}

और अगर आप .ui-panel-closed के लिए left सीएसएस संपत्ति रीसेट सभी fine काम करेगा:

.ui-panel-closed { 
    left: auto !important; // left auto fix problem 
}

स्रोत

2015-06-10 09:22:06 Pinal

वाह हाँ पर परीक्षण जो समस्या को हल करता है। मैं सोच रहा हूं कि आप इस समस्या की जांच के बारे में कैसे गए – l46kok

कुछ खास नहीं, बस सीएसएस गुणों की जांच करें। एंड्रॉइड पर आप क्रोम या बगली [Weinre] (http://people.apache.org/~pmuellr/weinre) के लिए [रिमोट डीबगर] (https://developer.chrome.com/devtools/docs/remote-debugging) का उपयोग कर सकते हैं /) एंड्रॉइड डिफ़ॉल्ट ब्राउज़र के लिए – Pinal

jQuery मोबाइल पैनल केवल Android ब्राउज़र पर

उत्तर

संबंधित मुद्दे