bootstrap jquery popover size

Question

В моем приложении с бутстрапом и fullcalender размер popover отображается неправильно. Можно ли настроить размер? Я использую самозагрузку 3.

код

$(window).load(function() { 
     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     /* initialize the external events 
     -----------------------------------------------------------------*/ 

     $('#external-events div.external-event').each(function() { 

      // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
      // it doesn't need to have a start or end 
      var eventObject = { 
       title: $.trim($(this).text()) // use the element's text as the event title 
      }; 

      // store the Event Object in the DOM element so we can get to it later 
      $(this).data('eventObject', eventObject); 

      // make the event draggable using jQuery UI 
      $(this).draggable({ 
       zIndex: 999, 
       revert: true,  // will cause the event to go back to its 
       revertDuration: 0 // original position after the drag 
      }); 

     }); 



     /* initialize the calendar 
     -----------------------------------------------------------------*/ 

     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      editable: true, 
      droppable: true, // this allows things to be dropped onto the calendar !!! 
      eventRender: function (event, element) { 
       element.popover({ 
        title: "My Title", 
        placement:'auto', 
        html:true, 
        trigger : 'click', 
        animation : 'true', 
        content: event.msg 
       }); 
       $('body').on('click', function (e) { 
        if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0) 
         element.popover('hide'); 
       }); 
       }, 

      events: [ 
         { 
          title: 'All Day Event', 
          start: new Date(y, m, 1), 
          msg: 'I am OK', 
         }, 
         { 
          title: 'Long Event', 
          start: new Date(y, m, d-5), 
          end: new Date(y, m, d-2), 
          msg: 'I am double OK', 
         }, 
         { 
          id: 999, 
          title: 'Repeating Event', 
          start: new Date(y, m, d-3, 16, 0), 
          allDay: false 
         }, 
         { 
          id: 999, 
          title: 'Repeating Event', 
          start: new Date(y, m, d+4, 16, 0), 
          allDay: false 
         }, 
         { 
          title: 'Meeting', 
          start: new Date(y, m, d, 10, 30), 
          allDay: false 
         }, 
         { 
          title: 'Lunch', 
          start: new Date(y, m, d, 12, 0), 
          end: new Date(y, m, d, 14, 0), 
          allDay: false 
         }, 
         { 
          title: 'Birthday Party', 
          start: new Date(y, m, d+1, 19, 0), 
          end: new Date(y, m, d+1, 22, 30), 
          allDay: false 
         }, 
         { 
          title: 'Click for Google', 
          start: new Date(y, m, 28), 
          end: new Date(y, m, 29), 
          url: 'http://google.com/' 
         } 
        ]  
     }); 

    }); 

JsFiddle http://jsfiddle.net/7gwz5/

Answer 1

Я не знаю, с fullcalendar, но классической структурой Bootstrap поповера выглядит следующим образом:

<div class="popover"> 
    <h3 class="popover-title">Title</h3> 
    <div class="popover-content">Content</div> 
</div> 

Тогда вам нужно установить размер до .popover clas s, и он должен работать; также убедитесь, что ваш плагин javascript не изменяет размеры или не меняет класс (например, с помощью инструментов разработчика Google Chrome). Если он все еще не работает, отправьте скрипт с кодом, мы с легкостью отлаживаем его. ;)

Answer 2

Got решение этой

просто добавил {container:'body'} к событию трещать и он работал большой

element.popover({ 
       title: "My Title", 
       placement:'auto', 
       html:true, 
       trigger : 'click', 
       animation : 'true', 
       content: event.msg, 
       container:'body' 
      }); 

Изменено JSLint http://jsfiddle.net/7gwz5/2/