flexbox - column of icons in bootstrap v4 -


i have simple column of icons using flexbox in bootstrap v4. comes fine, if click on icon, position changes slightly. seems happen in chrome. here fiddle:

https://jsfiddle.net/lenb/shr8bk89/10/
` html:

<body>       <div id='no'>        <div id='minus' class="icon" title="not special.">         <a href="#" id="nheart">           <img class="img icon" src="http://gps-photo.org/images/not.svg" />         </a>       </div>        <div id='plus' class="icon" title="loving it!">         <a href="#" id="heart1">           <img class="img" src="http://gps-photo.org/images/red-304570-1.svg" />         </a>       </div>        <div id='comment-button-div' class="icon" title="click comments">         <a class="comment-page" data-toggle="modal">           <img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg" />         </a>       </div>        <div id='info-div1' class="icon" title='information'>         <a class="info-page" data-toggle="modal">           <img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg" />         </a>       </div>      </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vz2wrjmwsjrmw/8u7i6pwi6alo1l79snbrmgidpgiwj82z8ea5lenwvxbmv1pah7" crossorigin="anonymous"></script> </body>

css:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxazxuh4hwsyylfb+j125mxis6mr5fohampbg064zb+afewh94ndvacbm8qnd" crossorigin="anonymous">       #removal {      border-color: black;      border-top: 10rem;    }     html,    body {      width: 100%;      height: 100%;    }       #no {      padding: 1rem;      display: flex;      display: -webkit-flex;      flex-wrap: nowrap;      -webkit-flex-wrap: nowrap;      justify-content: space-between;      -webkit-justify-content: space-between;      align-items: center;      -webkit-align-items: center;      align-content: space-between;      -webkit-align-content: space-between;      flex: 1 1 auto;      -webkit-flex: 1 1 auto;    }     .icon {      margin: auto;      flex-grow: 1;      flex-basis: auto;    }      /* // next images */    .img {      width: 8vmin;    }   /*   // stuff living in #no */    #info-div1 {      order: 3;      -webkit-order: 3;    }     #minus {      order: 0;      -webkit-order: 0;    }     #plus {      order: 1;      -webkit-order: 1;    }     #comment-button-div {      order: 2;      -webkit-order: 2;    }        #no {        flex-direction: column;        -webkit-flex-direction: column;        height: 100%;        max-width: 10rem;        order: 0;        -webkit-order: 0;      }

i see no reason why positioning should change.

can tell me wrong.

using normalize.css 1st load helps normalize vertical alignment chrome


Comments

Post a Comment

Popular posts from this blog

Receive udp packets in android gstreamer -

i using eclipse juno in windows 7. doing programming on android 4.2 platform. want receive udp packets in gstreamer application. giving uri udp://127.0.0.1:1234 , sending file vlc player same computer. emulator giving message could not get/set setting from/on resource while in case of rtp, giving message no uri implementer found rtp ideas how receive streaming media in android?
Read more

php - Extract Text from HTTP referer -

i using following code show referer link page on website. how can modify code shows part of link. i.e if website url www.example.com/?s=printing want extract printing. , should happen if format www.example.com/?s=aaa , not if format else www.example.com/printing. code: <?php session_start(); if ( !isset( $_session["origurl"] ) ) $_session["origurl"] = $_server["http_referer"]; echo $_session["origurl"] ?> i figured out , following code works: <?php session_start(); if ( !isset( $_session["origurl"] ) ) $_session["origurl"] = $_server["http_referer"]; $mysearchterm = $_server["http_referer"]; $whatiwant = substr($mysearchterm, strpos($mysearchterm, "=") +1); echo $whatiwant; ?>
Read more

matplotlib - PYTHON: Annotate boxes disapear dependant on range -

Image
i have issue plotting info boxes of data , fit. toy example follows. import numpy np import matplotlib.pyplot plt #works sigma = 0.12 mu = 0.5 #half works sigma = 0.1 mu = 0.3 ##none works #sigma = 0.05 #mu = 0.2 sample = np.random.normal(mu, sigma, 10000) fighs = plt.figure() axhs = fighs.add_subplot(1, 1, 1) n, histbins, patches = axhs.hist(sample,100, histtype='step', normed=1) axhs.annotate("$\mu=%.3f$ \n $\sigma=%.3f$ \n $n=%i$"% (sample.mean(), sample.std(), len(sample)), xytext=(0.8, 0.85), bbox=dict(boxstyle="sawtooth", fc="w"), xy=(0.8, 0.85), textcoords='axes fraction') axhs.plot(histbins, plt.mlab.normpdf(histbins, mu, sigma)) axhs.annotate(" $\mu=%.3f$ \n $\sigma=%.3f$ \n $n=%s$"%(mu,sigma,"--"), xytext=(0.6, 0.85), bbox=dict(boxstyle="round", fc="w"), xy=(0.6, 0.85), textcoords='axes fraction') plt....
Read more