twitter-bootstrap

How to use CKEditor in a Bootstrap Modal?

This should help http://jsfiddle.net/pvkovalev/4PACy/ $.fn.modal.Constructor.prototype.enforceFocus = function () { var $modalElement = this.$element; $(document).on(‘focusin.modal’, function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length // add whatever conditions you need here: && !$parent.hasClass(‘cke_dialog_ui_input_select’) && !$parent.hasClass(‘cke_dialog_ui_input_text’)) { $modalElement.focus() } }) }; Update October 2016: CDN link for CKEditor has been changed, so I … Read more

Django cannot find static files. Need a second pair of eyes, I’m going crazy

do the following: If you are in DEBUG, set STATICFILES_DIRS = (“path/to/static”) variable in your settings.py. It should then work only in DEBUG mode. If you want it to also work in deploy mode, set STATIC_ROOT = (“path/to/static_root”) variable in the settings.py. Then, execute python manage.py collectstatic and it should also work. And now, for … Read more

Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

You can very easily solve this by a cookie. There is a lot of simplified libraries, like https://github.com/carhartl/jquery-cookie as I use in the example below : <script src=”https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js”></script> add the following code to a script section (#accordion2 refers to the modfied twitter bootstrap example, I list afterwards) $(document).ready(function() { var last=$.cookie(‘activeAccordionGroup’); if (last!=null) { //remove … Read more

How to create a sticky left sidebar menu using bootstrap 3?

Bootstrap 3 Here is a working left sidebar example: http://bootply.com/90936 (similar to the Bootstrap docs) The trick is using the affix component along with some CSS to position it: #sidebar.affix-top { position: static; margin-top:30px; width:228px; } #sidebar.affix { position: fixed; top:70px; width:228px; } EDIT– Another example with footer and affix-bottom Bootstrap 4 The Affix component … Read more

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

I figured out how to do this very easily without modifying or adding any javascript. First you define the following CSS after all Twitter Bootstrap CSS: .collapse { height: auto; width: auto; } .collapse.height { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height … Read more

Images not responsive by default in Twitter Bootstrap 3?

Bootstrap 4 For Bootstrap 4 use Sass (SCSS): // make images responisve by default img { @extend .img-fluid; } answer updated for version 3 Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as: .img-responsive { display: block; height: auto; max-width: 100%; } Note img tag gets … Read more

Load a Bootstrap popover content with AJAX. Is this possible?

Works ok for me: $(‘a.popup-ajax’).popover({ “html”: true, “content”: function(){ var div_id = “tmp-id-” + $.now(); return details_in_popup($(this).attr(‘href’), div_id); } }); function details_in_popup(link, div_id){ $.ajax({ url: link, success: function(response){ $(‘#’+div_id).html(response); } }); return ‘<div id=”‘+ div_id +'”>Loading…</div>’; }

+ More