1

ブートストラップに関連する問題があります。私は2つのグリッド、col-lg6でページを分割しようとしています。 divにクラスを追加した後、空白のページが表示されます。DHTMLXスケジューラがブートストラップと競合しています

は、それは私のhtml

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'> 
     <div class="dhx_cal_navline"> 
      <div class="dhx_cal_prev_button">&nbsp;</div> 
      <div class="dhx_cal_next_button">&nbsp;</div> 
      <div class="dhx_cal_today_button"></div> 
      <div class="dhx_cal_date"></div> 
      <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div> 
      <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div> 
      <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div> 
     </div> 
     <div class="dhx_cal_header"></div> 
     <div class="dhx_cal_data"></div> 
    </div> 


<style type="text/css" media="screen"> 
    html, body { 
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
     overflow: hidden; 
    } 
</style> 

だとここで私は、私は例

<div class='col-lg-6'>---HERE IS CALENDAR---</div> 
<div class='col-lg-6'>---WHATEVER</div> 

のための2つのdivを作成した場合、スクリプトが

<script type="text/javascript"> 

    scheduler.init('scheduler_here', new Date(), "week"); 


    scheduler.form_blocks["my_editor"] = { 
     render: function (sns) { 
      return "<div class='dhx_cal_ltext' style='height:380px;'>" + 
       "<div class='col-lg-6'>" + 
       "<p>Nazwa posiłku </p><input type='text' class='form-control'></input>" + 
       "<p>Przygotowanie posiłku:</p> <textarea type='text' class='form-control' style='width: 100%;height: 50px; font-size: smaller; line-height: normal'></textarea>" + 
       "<br/>" + 
       "</div>" + 
       "<div class='col-lg-6'>" + 
       "<p>Składniki</p>" + 
       "<textarea type='text' class='form-control' style='width: 100%;height: 150px; font-size: smaller; line-height: normal;'></textarea>" + 
       "</div>" + 
       "<p style='margin-left:15px;'>Lista produktów: </p><select class='js-example-basic-single' multiple='multiple' style='width: 98%; margin-left:15px;' id='lightboxCalendar'></select>" + 
       "</div><br>"; 
     }, 
     set_value: function (node, value, ev) { 
      $.ajax({ 
       url: "/Calendar/GetDataForInvoiceNumber", 
       data: { 'key': '2112sd' }, 
       type: "post", 
       dataType: "json", 
       success: function (data) { 
        var inner = ""; 
        for (var i = 0; i < data.length; i++) { 
         inner += "<option value='" + data[i].id + "'>" + data[i].Nazwa_Produktu + "</option>"; 
        } 

        document.getElementById("lightboxCalendar").innerHTML = inner;      
       }, 
       error: function (xhr, ajaxOptions, thrownError) { 
        var err = eval("(" + xhr.responseText + ")"); 
        alert(err.Message); 
       } 
      }); 
      $(".js-example-basic-single").select2(); 
     }, 
     get_value: function (node, ev) { 
      ev.location = node.childNodes[4].value; 
      return node.childNodes[1].value; 
     }, 
     focus: function (node) { 
      //var a = node.childNodes[1]; s 
     } 
    } 
    scheduler.config.lightbox.sections = [ 
     { name: "description", height: 500, map_to: "text", type: "my_editor", focus: true } 
    ] 


    var events = [ 
{ id: 1, text: "Meeting", start_date: "04/11/2013 14:00", end_date: "04/11/2013 17:00" }, 
{ id: 2, text: "Conference", start_date: "04/15/2013 12:00", end_date: "04/18/2013 19:00" }, 
{ id: 3, text: "Interview", start_date: "04/24/2013 09:00", end_date: "04/24/2013 10:00" } 
    ]; 

    scheduler.parse(events, "json");//takes the name and format of the data source 
</script> 

私のウェブは空白になっています。 dhtmlxのようなブートストラップといくつかの競合を持っているように見えます。何が間違っているかも考えていますか?

ありがとうございました!

+0

この問題は解決しましたか?あなたは共有できますか? –

+0

@GregoireMulliez私はそれを修正することができませんでしたので、ほとんど同じ機能を持つ完全なカレンダーに切り替えました – Icet

答えて

0

私は マイエラーがCOL-SM-X(COL-SM-3 &のカップルと私のグリッド の内側に私のdivのサイズを定義するには、「忘れる」ことだったDHTMLxサポートのいくつかの助けを借りて問題を修正col-sm-9)

関連する問題