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

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

i trying ip address of vm , trying use establish ssh vm. following script: --- - hosts: localhost become: yes connection: local gather_facts: false serial: 1 vars_files: - createvmvars.yml tasks: - name: gathering vm info. vsphere_guest: vcenter_hostname: "{{vcenter_hostname}}" username: "{{vcenter_username}}" password: "{{vcenter_password}}" guest: "{{guest_name}}" vmware_guest_facts: yes register: var - debug: msg="{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" - name: establishing ssh connection. script: /home/shasha/devops/scripts/ssh_configure.sh "{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" following content of ssh_configure.sh : #!/bin/sh ssh-keygen -t rsa ssh-copy-id $1 but when running playbook, getting following error while executing third task: error! 'var' undefined but debug module(second task) printin
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