Need to put the image and text on same line - javascript

This is how it's looking
i need to make the icon and the text on the same line and close to each other, i tried usingdisplay: inline-block; but it didn't work, here's my code.
HTML:
<div className="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
CSS:
.Student_Icon {
height: 1vw;
width: 1vw;
display: inline-block;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}

Use flex in this case as shown below
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
.Comment_Icon {
display: flex;
flex-direction: row;
align-items: center;
}
.Student_Icon {
margin-right: 3px;
}
<div class="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div class="Comments">5 Class Comments</div>
</div>

.Student_Icon {
float: left;
padding-right: 10px;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
<div className="Comment_Icon">
<img src=https://via.placeholder.com/20 class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
I made use of float: left;
So the icon/image comes left and the text next to it.

You can achieve this with flexbox styling. Note that I am changing your React structure a bit and also adding a fake image. And did you mean to use 1vw? that means 1% of the viewport width and is pretty small - esp on small screens.
Using and referencing REM units is more reliable ( REM is set in the root element and is usually 16px but can be changed. But the advantage of using rems is that it is a common size that all elements can access.
.Comment_Icon {
display: flex;
align-items: center;
}
.Student_Icon {
height: 1.5rem;
width: 1.5rem;
}
.Comments {
font-size: 1rem;
margin-left: 8px;
}
<div class="Comment_Icon">
<img src="https://hipsiti.com/uploads/default-profile.png" alt="StudentIcon" class="Student_Icon"/>
<span class="Comments">5 Class Comments</span>
</div>

Related

Print out a content with the css style using javascript

I have a specific page the container some information with a specific design
this design exist in a separate page print.css
I want to print this page with the same style and this page containe an image also
function printContent() {
var divContents = document.getElementById("terms").innerHTML;
var a = window.open('', '', 'height=1000, width=1000');
a.document.write('<html>');
a.document.write("<link rel=\"stylesheet\" href=\"print.css\" type=\"text/css\" media=\"print\"/>");
a.document.write('<body >');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.focus();
setTimeout(function () {
a.print();
}, 1000);
a.print();
}
p {
display: inline-block;
}
.container header .top {
display: flex;
align-items: center;
gap: 30px;
margin-top: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #2c2a6b;
}
.container header .top h1 {
color: white;
background-color: #2c2a6b;
padding: 10px 20px;
width: fit-content;
width: -moz-fit-content;
border-top-left-radius: 20px;
}
.container header .top .print-header {
display: flex;
gap: 20px;
}
.container header .top .print-header h2{
color: #2c2a6b;
align-self: flex-end;
}
.container header .print-subheader {
padding: 20px 0;
color: #2c2a6b;
}
.container main .print-content .top {
display: flex;
align-items: flex-end;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #2c2a6b;
}
.container main .print-content .top img {
width: 50px;
}
.container main .print-content .top h3 {
color: #2c2a6b;
}
.container main .print-content .content{
margin-top: 20px;
}
.container main .print-content .content .inner-box{
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.container main .print-content .content .inner-box p{
color: #000;
font-weight: 500;
font-size: 16px;
}
<body>
<div class="container" id="terms">
<header>
<div class="top">
<h1>قطاع السياحة</h1>
<div class="print-header">
<img src="images/title-icon.png" alt="title">
<h2> اصدار رخصة الإيواء السياحي</h2>
</div>
</div>
<div class="print-subheader">
<h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
</div>
</header>
<main>
<div class="print-content">
<div class="top">
<img src="images/terms.png" alt="terms">
<h3>الاشتراطات العامة</h3>
</div>
<div class="content">
</div>
</div>
</main>
</div>
<input type="button" class="btn-print" onclick="printContent()" value="Print">
</body>
the problem is that the image and the style don't appear after i click the print button
after a search i found that i should put a timeout, and i should include the print.css file with media print but after all that the problem still exist i can't print the page with the image and the css style anyone can help please
This seems like an overly complicated solution to a really simply requirement, but perhaps there are details you've left out of the question.
It seems like you're including the CSS file dynamically just for printing purposes, but CSS already has a feature for this. I recommend removing all of your JavaScript, and instead wrapping your CSS in a print media query, like so:
#media print {
p {
display: inline-block;
}
/* the rest of your styles here */
}
Simply include these print styles with the rest of your page's CSS and the browser will take care of applying them for the print media.
If you absolutely must do this with JavaScript, you're going to need to wait until the stylesheet is finished loading. You can do that by creating the element, attaching an event listener for the onload event, then appending it to the DOM.
Something like:
let styles = document.createElement('link');
styles.addEventListener('load', function(){
window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);
Perhaps this will help
HTML
<body>
<div class="container" id="terms">
<header>
<div class="top">
<h1>قطاع السياحة</h1>
<div class="print-header">
<img src="images/title-icon.png" alt="title">
<h2> اصدار رخصة الإيواء السياحي</h2>
</div>
</div>
<div class="print-subheader">
<h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
</div>
</header>
<main>
<div class="print-content">
<div class="top">
<img src="images/terms.png" alt="terms">
<h3>الاشتراطات العامة</h3>
</div>
<div class="content">
</div>
</div>
</main>
</div>
<button onclick="window.print();" class="noPrint">
Print Me
</button>
</body>
CSS
#media print {
.noPrint{
display:none;
}
}
h1{
color:#f6f6;
}
p {
display: inline-block;
}
.container header .top {
display: flex;
align-items: center;
gap: 30px;
margin-top: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #2c2a6b;
}
.container header .top h1 {
color: white;
background-color: #2c2a6b;
padding: 10px 20px;
width: fit-content;
width: -moz-fit-content;
border-top-left-radius: 20px;
}
.container header .top .print-header {
display: flex;
gap: 20px;
}
.container header .top .print-header h2{
color: #2c2a6b;
align-self: flex-end;
}
.container header .print-subheader {
padding: 20px 0;
color: #2c2a6b;
}
.container main .print-content .top {
display: flex;
align-items: flex-end;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #2c2a6b;
}
.container main .print-content .top img {
width: 50px;
}
.container main .print-content .top h3 {
color: #2c2a6b;
}
.container main .print-content .content{
margin-top: 20px;
}
.container main .print-content .content .inner-box{
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.container main .print-content .content .inner-box p{
color: #000;
font-weight: 500;
font-size: 16px;
}
By adding the class="noPrint" you can remove what you dont want printed out!
Let me know if this is what you had in mind
here is a codepen.io link
Do you want to load the image via js?
or is that the picture?
terms.png
This should be displayed, but you can also load it separately via js and adjust it in print.css.
a.document.write('<link rel="stylesheet" type="text/css" href="./print.css">'); //loads the style
document.write('<img src="./images/terms.png"> //or
document.write('<img src="./images/terms.png" style="style for the picture">

Error in event handler: TypeError: Cannot read property 'dataset' of null

So i get this above mentioned error when i click my hamburger. And after clicking the hamburger my whole page turns white and when i right click nothing appears at all. Where is the issue here?I searched a lot of similar problems on the internet. Theres only talks about putting the script tag at the bottom and writing the window.onload function. I have put the script tag at the bottom of the body still this is happening.
ERROR MESSAGE:
Error in event handler: TypeError: Cannot read property 'dataset' of null
at Jr (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:103527)
at Xr.updateState (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105004)
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105819
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:73161
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110691
at Array.forEach ()
at wi.fire (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110679)
at _onBgPortMessage (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:115134)
HTML
<header>
<nav class="wrapper2">
<div class="logo">
<h1>LO</h1>
</div>
<div class="navbar">
<ul>
<li><a>ABOUT</a></li>
<li>ARTICLES</li>
<li>SUBSCRIBE</li>
</ul>
</div>
</nav>
<div class="hamburger" onclick="open()">
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="hero">
<h1>LOMBOK</h1>
<h2>HOLISTIC HEALTH & MORE</h2>
<div class="bigbar"></div>
</div>
</header>
SASS
header{
background-image: url(../images/heroimg.jpg);
background-size: cover;
background-position: 65%;
height: 100vh;
margin: 10px;
nav{
display: none;
justify-content:space-between;
.logo{
font-size: 1.5rem;
position: relative;
top: -10px;
}
.navbar ul{
display: flex;
width: 480px;
justify-content: space-between;
li{
list-style: none;
cursor: pointer;
letter-spacing: 0.2rem;
a{
text-decoration: none;
color: black;
}
}
li:last-child{
border: 2px solid black;
padding: 15px 20px;
position: relative;
top:-16px;
}
}
}
.hamburger{
position: absolute;
top: 2rem;
right: 1.8rem;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 20px;
cursor: pointer;
.bar{
height: 5px;
width: 100%;
background-color:$primary-color;
border-radius: 10px;
}
}
.hero{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.7;
h1{
font-size: $primary-size;
font-weight: 600;
}
h2{
font-size: $secondary-size;
font-weight: 500;
}
.bigbar{
display: inline-block;
height: 7px;
width: 45px;
background-color: $secondary-color;
margin-top: 20px;
}
}
}
.active{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.bgdark{
background-position: left bottom;
opacity: 0.4;
}
.inactive{
display: none;
}
JS
window.onload = function() {
const open = ()=> {
const nav = document.querySelector("nav");
const header=document.querySelector("header");
const hero=document.querySelector(".hero");
nav.classList.toggle(".active");
header.classList.toggle(".bgdark");
hero.classList.toggle(".inactive");
};
};
Ok so the issue here is that the open() function is a reserved method on the window object https://developer.mozilla.org/en-US/docs/Web/API/Window/open
So when you add open() on the onclick argument it will fire the window.open() method, which whenever executed without any arguments just opens a black page (hence no DOM to be inspected)
So one of the easy fixes is just to rename the function to anything that is not already a standard method of the window object. Or just add an anonymous function as a callback to the click event in the js file
document.querySelector('.hamburger').addEventListener('click', function(e) {
const nav = document.querySelector("nav");
const header=document.querySelector("header");
const hero=document.querySelector(".hero");
nav.classList.toggle("active");
header.classList.toggle("bgdark");
hero.classList.toggle("inactive");
});
and here's some simple fiddle
https://jsfiddle.net/5hdk1op4/

How to have a tab containing flexible height menu fixed at bottom of window and slide up on click using jQuery?

I tried coding it myself based on research on the internet. I was able to get it fixed at the bottom. When clicking, it does slide out the menu; but it slides out downwards when it should have pushed the tab upwards to display the menu. If I use negative margin and simply change bottom: -150 to bottom: 0px on click, it does produce the desired behavior by sliding it up from past the bottom of the window and it displays correctly. But it means the menu is pushing the page past the bottom of the page rather than simply being hidden. So when it's "hidden", one can simply scroll down and see the full menu which shouldn't be the case.
So rather than using bottom to manipulate it, I tried using $(this).show("slide"). The menu came out looking distorted thanks to using the sliding animation.
Here's the snippet:
var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
supTabState = !supTabState;
if (supTabState) {
// $("#dccontainer").css('bottom', '0px');
$(this).show("slide", {
direction: "down"
}, 1000);
} else {
// $("#dccontainer").css('bottom', '-150px');
$(this).show("slide", {
direction: "up"
}, 1000);
}
});
#dccontainer {
position: absolute;
bottom: 0;
width: 300px;
left: 50%;
height: 200px;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I've tried various techniques. I've tried toggling with CSS alone using CSS animation and toggleClass, I've tried using slide, and I've tried using slideToggle. I also tried using display: block; instead of using flexbox. Both had the same effect. Researching the internet yielded several possible solutions (which I've tried, but all came out with the same result), and those usually weren't based on an element being fixed at bottom of window. The only one that came closest to what I was looking for was this:
http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html
But strangely, when I attempted to use the same code that used, nothing happened. Clicking did not bring up the menu. I'm at a loss at this point. Where am I going wrong?
This is my latest attempt (using above code): https://codepen.io/doncullen/pen/JjdrxzY
To answer your question Where am I going wrong: you're specifying a fixed height of 200px on #dccontainer. Specifying a fixed height to the container renders the jQuery's slideToggle useless. jQuery's slideToggle animates the height of the given element, and in your case, you're animating #dcsupportcontainer. Even though you're animating the height of #dcsupportcontainer to 0px using slideToggle, the whole support block will still remain 200px in height. This causes makes the whole block not to move down when the #dcsupportcontainer is gone. You can, of course, manually calculate and assign the new bottom value to #dccontainer, but that's a real hassle and really unintuitive.
Not wanting to calculate the bottom value myself, I will not set a height to #dccontainer and just let its height be. It will set its height to all its children's requirements (the default value is auto). Furthermore, instead of using fixed, you used absolute. You should use fixed here as you want the support block to always be visible (even when the user scrolls down); this means that you should position it based on your viewport and not an element (read more about positioning here). I also did minor adjustments on your CSS styles so that it's a tad more concise. One last thing, I suggest that you revisit flexbox here and here to utilise it better.
Here's a working solution:
// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500)
});
* {
box-sizing: border-box;
margin: 0;
}
body {
min-width: 100vw;
min-height: 100vh;
}
#dccontainer {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 50vw;
min-width: 200px;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}
#dccontainer * {
padding: 7px 20px;
text-align: center;
}
#dcsupporttab {
font-weight: bold;
border-radius: 5px 5px 0 0;
background: #121212;
color: #ffffffee;
cursor: pointer;
}
#dcsupportcontainer {
border: 1px solid #121212;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
Just take the fixed height from your main container #dccontainer, and everything will be fine. You should also remove a few lines of your javascript code to fix everything. That fixed height of dccontainer makes the whole nav to stand 200px up from the bottom of your page and that makes you use more jQuery to fix it at the bottom. Remember that the bottom: 0px will set the bottom of your element at the 0px bottom of its container.
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
});
#dccontainer {
position: absolute;
bottom: 0px;
width: 300px;
left: 50%;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>

How to center elements together <div> and <h1>, top to bottom?

I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.
After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative, yet it is not centered correctly.
I tried to break down to the necessary CSS, but still not able to recreate it.
Code:
<div style={{height: '100%’}}>
<div className="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
CSS (SCSS):
.container {
height: 100%;
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
}
#rotate-container {
div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
}
What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.
Thank you in advance and will be sure to accept and upvote answer.
You're close. both html and body need to be height: 100%;, too, otherwise it's children won't be 100% of the viewport.
.container doesn't need height: 100%;. Since you already have .container at top: 50%;, just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.
body, html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
You can also use flexbox with align-items: center;
body,
html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%; display: flex; align-items: center;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
Try:
body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}
.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
And adjust accordingly

How to always fill the parent height using flexbox?

I have the following HTML:
<div class="admonition info">
<p class="admonition-title">Info</p>
<p>Text here</p>
</div>
And CSS:
.admonition {
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.admonition > p {
margin: 0;
padding: 6px;
display: block;
}
.admonition-title {
background-color: #2B83BD;
color: #fff;
display: block;
padding: 2px;
}
.admonition > .admonition-title {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
width: 64px;
text-align: center;
vertical-align: middle;
min-width: 60px;
}
.admonition > .admonition-title:before {
font-family: "FontAwesome";
font-size: 32px;
letter-spacing: normal;
color: #fff;
}
.admonition.info > .admonition-title:before {
content: "\f129";
}
.admonition.info > p:not(.admonition-title) {
background-color: #7DBAE3;
}
.admonition.info > .admonition-title {
background-color: #2B83BD;
}
I would like to render the children with the following constraints:
They are vertically centered
If their height is not equal, they should stretch to fill the gaps
The white gaps are what I would like to avoid. Live on JSFiddle
The HTML is generated from markdown and I don't really have control over the structure. Is this possible to implement in a simple way? Javascript, jquery is also OK, but I'd prefer to do this in CSS.
Just use align-items: stretch; to make the items fill the parent height.
Then, your icon will need to be centered manually, I have done it with:
.admonition > .admonition-title {
display: flex;
align-items: center;
justify-content: center;
}
https://jsfiddle.net/4mw8a08x/

Categories