IE flex collapse bug fix
How do I make an ie flex collapse bug fix?
Bug fix for the IE 10-11 Flexbox bug where flex items collapse to nothing when using the flex shorthand property in a vertical Flexbox layout. . What is a ie flex collapse bug fix? How do you make a ie flex collapse bug fix? This script and codes were developed by Roland Warmerdam on 23 September 2022, Friday.
IE flex collapse bug fix - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IE flex collapse bug fix</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <div class="column"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero sed neque sunt eveniet quidem est. Natus facilis et quis velit iure at id corrupti explicabo sunt quod. Maxime officia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero sed neque sunt eveniet quidem est. Natus facilis et quis velit iure at id corrupti explicabo sunt quod. Maxime officia! </div> </div> <div class="column"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero sed neque sunt eveniet quidem est. Natus facilis et quis velit iure at id corrupti explicabo sunt quod. Maxime officia! </div> </div>
</div>
<label class="fix-toggle"> <input type="checkbox"> Toogle bug fix
</label> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
IE flex collapse bug fix - Script Codes CSS Codes
.row { display: -ms-flexbox; display: -webkit-box; display: flex;
}
.column { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; width: 300px;
}
.inner { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; background: lightblue;
}
.fix .inner { -ms-flex: 1 auto; -webkit-box-flex: 1; flex: 1 auto;
}
.inner { padding: 0.3em 0.5em; margin: 0.5em; border-radius: 0.5em;
}
.fix-toggle { position: fixed; top: 0; left: 0; padding: 0.3em 0.5em; border-bottom-right-radius: 0.3em; background: white; box-shadow: 0 0 3px 1px #333; line-height: 1;
}
IE flex collapse bug fix - Script Codes JS Codes
$(function () { $('.fix-toggle input').on('change', function () { $('body').toggleClass('fix'); });
});
Developer | Roland Warmerdam |
Username | Rowno |
Uploaded | September 23, 2022 |
Rating | 3 |
Size | 2,678 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Chameleon background | 2,314 Kb |
Legacy flexbox invisible float bug fix | 2,625 Kb |
SVG line animation | 4,485 Kb |
Bootstrap Carousel Fade Transition | 2,484 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
My three.js practice | Esambino | 3,203 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!