html - Flex box fix for IE? -

-

i using flex portion of web page doesn't great in ie. what's best fix this?enter image description here

demo: https://jsfiddle.net/8otrpjt8/

/* latest compiled , minified css included external resource*/    /* optional theme */  @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');    body {      margin: 10px;  }          .row-flex, .row-flex > div[class*='col-'] {        display: -webkit-box;      display: -moz-box;      display: -ms-flexbox;      display: -webkit-flex;      display: flex;      flex:1 1 auto;  }    .row-flex-wrap {  	-webkit-flex-flow: row wrap;      align-content: flex-start;      flex:0;  }    .row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {  	 margin:-.2px; /* hack adjust wrapping */  }    .container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {  	width:100%;  }      .flex-col {      display: flex;      display: -webkit-flex;      flex: 1 100%;  	flex-flow: column nowrap;  }    .flex-grow {  	display: flex;      -webkit-flex: 2;      flex: 2;  }    .panel-default>.panel-heading {  background:white;  border-color:white;  padding: 15px 0;  }    .panel {  border:none  }    .panel-body {  background:#eaeaea  }    .panel-body p {  margin-bottom:0;  }    .panel-footer {  display:none;  }    .row .panel div {  margin-bottom:0  }    .content-block-inner {    color: white;    cursor: pointer;    display: block;    height: 100%;    left: 0;    position: absolute;    top: 0;    width: 100%;    -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)";    filter: alpha(opacity=0);    -moz-opacity: 0;    -khtml-opacity: 0;    opacity: 0;    -webkit-transition: opacity 500ms;    -moz-transition: opacity 500ms;    -o-transition: opacity 500ms;    transition: opacity 500ms;  }    .content-block-text {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);    -moz-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    -o-transform: translate(-50%, -50%);    width: 300px;  }    article:hover .content-block-inner {    opacity: 1;  }  article .content-block-inner {    position: absolute;top:0;right:0;bottom:0;left:0;  }    .image-placeholder-container {    display: inline-block;    position: relative;  }      img.lazy-load {      width:100%  }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  <div class="container">    <div class="row row-flex row-flex-wrap">  <div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">  <div class="panel panel-default flex-col">  <div class="panel-heading">  <h4 class="service-heading">heading</h4>  </div>  <div class="panel-img"><img class="img-responsive" src="http://placehold.it/400x400" alt="" /></div>  <div class="panel-body flex-grow">  <p class="text-muted">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam tincidunt varius sapien, eu semper felis elementum in. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. aliquam nibh lectus, pellentesque ac semper ac, blandit @ dolor. mauris condimentum, urna in tincidunt sodales, neque metus interdum eros, commodo odio diam @ nisl. integer facilisis fermentum interdum. vestibulum accumsan sodales convallis. duis pulvinar vitae dui euismod lobortis. donec nec ex congue, dictum tellus lobortis, aliquet purus. praesent feugiat ullamcorper interdum. nunc convallis velit rhoncus, consectetur ipsum a, convallis risus. etiam pulvinar risus @ elit porta, ac laoreet leo ultricies. proin facilisis felis non nisl tempus blandit. curabitur consequat sodales lacus, in fermentum arcu bibendum venenatis.</p>  </div>  <div class="panel-footer"></div>  </div>  </div>    </div>

just remove display: flex; .flex-col work in ie also.

/* latest compiled , minified css included external resource*/    /* optional theme */  @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');    body {      margin: 10px;  }          .row-flex, .row-flex > div[class*='col-'] {        display: -webkit-box;      display: -moz-box;      display: -ms-flexbox;      display: -webkit-flex;      display: flex;      flex:1 1 auto;  }    .row-flex-wrap {  	-webkit-flex-flow: row wrap;      align-content: flex-start;      flex:0;  }    .row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {  	 margin:-.2px; /* hack adjust wrapping */  }    .container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {  	width:100%;  }      .flex-col {      flex: 1 100%;  	flex-flow: column nowrap;  }    .flex-grow {  	display: flex;      -webkit-flex: 2;      flex: 2;  }    .panel-default>.panel-heading {  background:white;  border-color:white;  padding: 15px 0;  }    .panel {  border:none  }    .panel-body {  background:#eaeaea  }    .panel-body p {  margin-bottom:0;  }    .panel-footer {  display:none;  }    .row .panel div {  margin-bottom:0  }    .content-block-inner {    color: white;    cursor: pointer;    display: block;    height: 100%;    left: 0;    position: absolute;    top: 0;    width: 100%;    -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)";    filter: alpha(opacity=0);    -moz-opacity: 0;    -khtml-opacity: 0;    opacity: 0;    -webkit-transition: opacity 500ms;    -moz-transition: opacity 500ms;    -o-transition: opacity 500ms;    transition: opacity 500ms;  }    .content-block-text {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);    -moz-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    -o-transform: translate(-50%, -50%);    width: 300px;  }    article:hover .content-block-inner {    opacity: 1;  }  article .content-block-inner {    position: absolute;top:0;right:0;bottom:0;left:0;  }    .image-placeholder-container {    display: inline-block;    position: relative;  }      img.lazy-load {      width:100%  }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  <div class="container">    <div class="row row-flex row-flex-wrap">  <div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">  <div class="panel panel-default flex-col">  <div class="panel-heading">  <h4 class="service-heading">heading</h4>  </div>  <div class="panel-img"><img class="img-responsive" src="http://placehold.it/400x400" alt="" /></div>  <div class="panel-body flex-grow">  <p class="text-muted">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam tincidunt varius sapien, eu semper felis elementum in. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. aliquam nibh lectus, pellentesque ac semper ac, blandit @ dolor. mauris condimentum, urna in tincidunt sodales, neque metus interdum eros, commodo odio diam @ nisl. integer facilisis fermentum interdum. vestibulum accumsan sodales convallis. duis pulvinar vitae dui euismod lobortis. donec nec ex congue, dictum tellus lobortis, aliquet purus. praesent feugiat ullamcorper interdum. nunc convallis velit rhoncus, consectetur ipsum a, convallis risus. etiam pulvinar risus @ elit porta, ac laoreet leo ultricies. proin facilisis felis non nisl tempus blandit. curabitur consequat sodales lacus, in fermentum arcu bibendum venenatis.</p>  </div>  <div class="panel-footer"></div>  </div>  </div>    </div>


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more