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

http://getbootstrap.com/css/#grid-offsetting


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -