javascript - बूटस्ट्रैप डाटाइमैपिकेलर कैलेंडर दृश्यमान नहीं है




jquery css twitter-bootstrap calendar (2)

आपको overflow:hidden; को दूर करने की आवश्यकता है overflow:hidden; पेरेंट कंटेनर से भी

इस सीएसएस जोड़ें:

.pq-grid, .pq-grid-center, div.pq-grid-cont, .pq-grid-cont-inner {
    overflow: visible!important;
}

डेमो: http://jsfiddle.net/rtzxsa3e/2/

मैं इसके उपयोग का समर्थन नहीं कर रहा हूँ !important यहाँ !important आप अपने एचटीएमएल कोड को अच्छी तरह से जानते हैं यदि आप अधिक विशिष्ट चयनकर्ता निर्दिष्ट कर सकते हैं जो ग्रिड प्लगइन के डिफ़ॉल्ट सीएसएस को ओवरराइड कर सकता है, तो यह भी काम करेगा।

मैं बूटस्ट्रैप 3 डेटाएमैईपिकर का उपयोग कर रहा हूँ यहां बूटस्ट्रैप डेटेटिमिपिकर कैलेंडर ग्रिड के बाहर दिखाई नहीं दे रहा है। यह ग्रिड के अंदर छुपा रहा है कृपया jsfiddle देखें

http://jsfiddle.net/rtzxsa3e/

$(function () {
    var data = [

        { rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },

        { rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
 ];
     var obj = { 
        height:300,
         title: "ParamQuery Grid with JSON Data",
        scrollModel:{autoFit:true, theme:true}
    };

    obj.colModel = [

        { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
        { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
        { title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false, 
         render : function(){
          var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';                                                                                                                                                                             

          return date;
        }
         },
        { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
    ];   

     $('body').on('mouseover','.input-group',function() { 

     $(".input-group.date").datetimepicker();

     });    

    obj.dataModel = { data: data };   

    $("#grid_json").pqGrid(obj);
});

     
td.pq-grid-cell{
    overflow:visible !important;
}
span.input-group-addon {
  width: 27px;
}
<div id="grid_json" style="margin:100px;"></div>

अगर मैं पिकर पर क्लिक करता हूं, तो बूटस्ट्रैप कैलेंडर खुली है लेकिन यह संपूर्ण कैलेंडर दिखाई नहीं दे रहा है। मैं ग्रिड के बाहर कैलेंडर प्रदर्शित करना चाहता हूं। मैंने "अतिप्रवाह: दृश्यमान" और "दृश्यता: दृश्यमान" दिया है, लेकिन फिर भी यह काम नहीं कर रहा है। ऐसा करने के लिए कृपया मेरी मदद करें


क्या आपको सीएसएस को सीधे बदलना है? व्हाट अबाउट...

<nav class="navbar navbar-inverse" style="background-color: #333399;">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>





javascript jquery css twitter-bootstrap calendar