Conflit DHTMLX Scheduler avec bootstrap

Question

J'ai un problème lié à bootstrap. J'essaie de diviser la page sur deux grilles, col-lg6. Après avoir ajouté la classe à div je reçois une page blanche.

Il est mon 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> 

et ici je scénario

<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> 

Si je crée deux divs par exemple

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

Mon web est vide. On dirait que dhtmlx a des conflits avec bootstrap. Avez-vous une idée de ce qui ne va pas?

Merci pour toute aide!

Answer 1

Je résolu le problème avec l'aide d'un soutien DHTMLX Mon erreur était « oublier » de définir une taille de mes div est à l'intérieur de ma grille avec un couple de col-sm-x (col-sm-3 & col-sm-9) si fonctionne comme un charme