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

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

Image
recently have uploaded wordpress site onto server. have uploaded wordpress site in sub-folder under root folder ../root(domain root folder)/wordpress (where host wordpress folder). now problem content data in page or post in dashboard of wordpress admin panel not showing - see image. but data showing in front view - see image. if not browser cache issue , not issue happened tinymce editor during upgrade; try add config file: define('concatenate_scripts', false);
Read more

javascript - Get parameter of GET request -

i make request: createxhrrequest( "get", fileurl, function( err, response ) { if( err ) { alert( "error get!" ); } alert(response); }); and full response: { "status" : "ok", "message" : "jvberi0xljqkjdduxdgkmy how can jvberi0xlj ? i try response.message , response["message"]. nothing works. just simple access this: var json = json.parse(response); json.message
Read more

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -

Image
i have not tryed since can't understand space between tooltip , element made/added bootstrap, tooltip near element triggers tooltip event. i make tooltip opening little bit away element, add more margin tooltip , eleemnt mean. i understand how in css if possible , if possible make both right,left,top,bottom tooltips hope question clear. this how tooltips looks on app: and , how should looks after this default css tooltip on top : .tooltip.top { padding: 5px 0; margin-top: -3px; } you can override in own css : .tooltip.top { margin-top: -10px; } note code work work tooltip on top, you'll nedd adapt css 3 other orientations : .tooltip.top { margin-top: -10px; } .tooltip.right { margin-left: 10px; } .tooltip.bottom { margin-top: 10px; } .tooltip.left { margin-left: -10px; }
Read more