html - Browser issues centering widgets (not text) in bootstrap panels -
i using angularjs , bootstrap3. proper procedure centering widgets within panel , obtaining responsive behavior? getting unique results in firefox.
i have 4 column divs demarcated this, each including panel:
<div class="col-lg-3 col-md-6 col-xs-12"> <div class="panel panel-default">
i have created css class called "center-block" div's want centered. center-block class below.
.center-block { display: table; margin: 0 auto; }
i using justgage widget (http://justgage.com/)and angular-justgage (https://github.com/mattlaver/angular-justgage). versions are:
<script src="./lib/angular-thirdparty/justgage-1.2.2/raphael-2.1.4.min.js"></script> <script src="./lib/angular-thirdparty/justgage-1.2.2/justgage.js"></script> <script src="./lib/angular-thirdparty/angular-justgage-master/ng-justgage.js"></script>
these being included in panel in following manner:
<div class="center-block"> <just-gage id="thing" title="thing" min="40" max="220" label={{thingstring}} value={{thing}}> </just-gage> </div>
i using input-groups, toggle-switches, etc. each within own div center-block tag. how stacking widgets vertically, , centering them within panel.
the whole system works , responsive screen changes except on firefox. in firefox38, justgage widget doesn't render @ all, , in firefox 46.01, renders, isn't responsive moves 1 side of column page shrunk , columns reduce 4 2 1 , back.
i experienced programmer, not experience web developer, , wondering if behavior expected in world of browsers, of if doing fundamentally incorrect bootstrap , centering of widgets.
bootstrap has offset classes aligning grid. may link solve issue
Comments
Post a Comment