After upgrading bootstrap-select.min.js version from 1.12.4 to 1.13.1 all height style of controls on my site are broken. The height is properly styled if I include 1.12.4/js/bootstrap-select.min.js but not 1.13.1/js/bootstrap-select.min.js
All CDNs are from https://cdnjs.cloudflare.com/ajax/libs.
I am using Bootstrap 4
Upgraded includes
bootstrap-select/1.13.1/css/bootstrap-select.min.css
// controls height is broken when using this include
bootstrap-select/1.13.1/js/bootstrap-select.min.js
ajax-bootstrap-select/1.4.3/css/ajax-bootstrap-select.min.css
ajax-bootstrap-select/1.4.3/js/ajax-bootstrap-select.min.js
Downgraded includes
// bootstrap-select/1.12.4/css/bootstrap-select.min.css
// controls height working when using this line with upgraded includes
bootstrap-select/1.12.4/js/bootstrap-select.min.js
// ajax-bootstrap-select/1.4.3/css/ajax-bootstrap-select.min.css
// ajax-bootstrap-select/1.4.3/js/ajax-bootstrap-select.min.js
Make sure you have specified HTML5 using <!doctype html>.
See Different height of select with HTML5 and Bootstrap Select for the more detailed answer
Related
I am currently creating a project in ExtJS 7.2
How can I change the entire application font-family dynamically
Like allowing the user to select the best font by example from drop-down list and that has to be applied to the entire application.
I know that I can create the file {project-folder}\classic\sass\var\all.scss and just update the font-family inside it as the following
$font-family: 'Tahoma' !important;
but how can I change this value dynamicly ?
thanks
You can use Ext.util.CSS to add css rules.
// as no * rule exists, you have to create a new stylesheet
Ext.util.CSS.createStyleSheet("* {font-family: 'Tahoma';}", "some-id")
Then you can update * rule with :
Ext.util.CSS.updateRule('*', "font-family", "Roboto");
Don't use !important here because of font-ext, font-awesome and font-pictos packages
I want to change my website to React. So I am changing the normal bootstrap to React bootstrap. I have just a simple question, what's the equivalent of Bootstrap visible-xs in React bootstrap? Like in simple bootstrap we have 'hidden-xs' and we use xsHidden in Reactboostrap.
Just ran into that today! visible-xs went away in bootstrap 4, and react-bootstrap 1.0 now uses bootstrap 4. The same is true of hidden-xs (and in all of the various sizes... hidden-sm, hidden-md, etc.)
In my case <Row className="visible-xs"> becomes <Row bsPrefix="d-block d-sm-none">
The bootstrap documentation has a nice table on how to convert to the new styles
I just installed angular-perfect-scrollbar.
I used the jQuery perfect-scrollbar Plugin but since angular it was thrown out.
Question:
is there a way to update the angular-perfect-scrollbar like $('#container').perfectScrollbar('update'); in jQuery ?
how can I scroll to bottom of container (on content change) with that angular plugin?
If thats not possible with this angular plugin are there alternatives that includes the features above ?
as I tested, you need to add <include-padding='true'> to html tag then it could scroll to bottom(in fact this will change the scroller length, therefore)
it looks like
<perfect-scrollbar include-padding='true'>
<..your stuff..>
</perfect-scrollbar>
cheers
howto resize angular ui bootstrap modal on large size it looks that it doesn't work ? by the doc page it's enough to add size attribute https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs , also when I try to add size='lg' (with ui-bootstrap version 0.10.0) into example.js open function in plunker from official page it doesn't work http://plnkr.co/edit/lNqi9T8HRUHzcleY68KB?p=preview
I've never had luck with that feature. We just add a class to the modal with the windowClass property and it all works.
CSS
.full .modal-dialog{
width:auto;
margin-left:20px;
margin-right:20px;
}
$modal.open({
template:'blah.htm',
windowClass:'full'
controller:'blahCntrl'
});
It "doesn't work" since the commit where this feature was introduced (https://github.com/angular-ui/bootstrap/commit/976f6083e8485333612b05c023a3c490404543f0) wasn't released yet, so it is not part of the official 0.10.0 release.
You need to wait for 0.11.0 release (hopefully this weekend) or build your own version from the master branch as described here: https://github.com/angular-ui/bootstrap#development
I want to make a simple use of the plugin x-editable, following step by step what's to do in the official doc.
It actualy worked fine when I was on Bootstrap 2, though, it doesn't work anymore on BS3 (even if I updated everything to the latest version etc.).
So when I click on the link to trigger the editable popover, I got this error in firebug :
TypeError: this.$element.data(...) is undefined
[...]/Bootstrap3/js/bootstrap-editable.js
Line 154
Which is actually this line :
this.$element.data('popover').tip().addClass('editable-popover');
Btw, I'm using CakePHP, all the plugins (js and CSS) are declared etc...
So I'm running out of idea, if someone knows about it, would be cool !
Thanks !
EDIT : Problem solved, just had to reload the cache... Old script was still in it so there was compatibility problems.
Did you download the latest Bootstrap 3 ready version from: http://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.0.zip
I didn't find any problem following the steps from http://vitalets.github.io/x-editable/docs.html. See: http://jsfiddle.net/xaRbU/
Note the examples use jquery-2.0.3 (the fiddle above works with 1.9.1). Since jQuery 2 doesn't support IE8 Bootstrap requires the newest 1.x version of jQuery, see also: Updating Bootstrap to version 3 - what do I have to do?
Code used:
html:
<div class="container">
<div class="row">
superuser
</div>
</div>
javascript:
$(document).ready(function() {
$('#username').editable();
});
css:
/* create some space cause the popup shows on the top of the element */
body{padding-top:100px;}