Only rendering the first div within the body
See original GitHub issueAfter trying to find out why it’s doing this I cannot figure it out. My HTML renders correctly in a browser however once I try using this library to convert it into an image it will only render the first div. Any ideas why it’s doing this? `
var html = '
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
width: 930px;
height: 280px;
}
#background {
background: #34495e;
width: 100%;
height: 100%;
}
#avatar-div {
display: flex;
justify-content: center;
align-items: center;
}
#avatar {
height: 75%;
width: 75%;
border-radius: 50%;
border: 7px solid #2ecc71;
}
.userInfo {
height: 33%;
display: flex;
align-items: flex-end;
}
.userInfo>p {
font-family: 'Roboto', serif;
text-align: right;
margin: 0;
}
#rank-text, #rank-num, #username, #cur-xp {
color: #ecf0f1;
}
#rank-text, #level-text {
font-size: 20px;
line-height: 1;
}
#rank-num, #level-num {
font-size: 60px;
line-height: 0.75;
}
#level-text, #level-num {
color: #81ecec;
}
#username {
font-size: 40px;
width: 100%;
text-align: left;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#cur-xp {
width: 100%;
font-size: 18px;
line-height: 1.3;
padding-right: 6px;
}
#next-xp {
text-align: left;
color: #95a5a6;
font-size: 18px;
line-height: 1.3;
white-space: nowrap;
}
#progress-bar-bg, #progress-bar {
background-color: #353b48;
width: 98%;
height: 50%;
border-radius: 50px;
position: absolute;
top: 25;
left: 0;
}
#progress-bar {
background-color: #2ecc71;
z-index: 10;
border-radius: 50px;
width: ${barPercentage}%;
}
.h-100 {
height: 100%;
}
.w-100 {
width: 100%;
}
.p-0 {
padding: 0;
}
.pl-0 {
padding-left: 0;
}
.pr-2 {
padding-right: 40px;
}
</style>
</head>
<body>
<div class="container" id="background">
<div class="row">
<div class="col-lg-4 h-100" id="avatar-div">
<img id="avatar" src="${userURL}" alt="">
</div>
<div class="col-lg-8 h-100 pr-2">
<div class="row">
<div class="col-lg-6 userInfo"></div>
<div class="col-lg-3 userInfo p-0">
<p class="w-100" id="rank-text">RANK</p>
<p id="rank-num">#</p>
</div>
<div class="col-lg-3 userInfo">
<p class="w-100" id="level-text">LEVEL</p>
<p id="level-num">${userData.level}</p>
</div>
</div>
<div class="row">
<div class="col-lg-8 userInfo p-0">
<p id="username">${user.username}</p>
</div>
<div class="col-lg-4 userInfo">
<p id="cur-xp">${abriviatedXP}</p>
<p id="next-xp">/ ${abriviatedNext} xp</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 userInfo pl-0">
<div id="progress-bar-bg"></div>
<div id="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
';
var img = await nodeHtmlToImage ({
html: html,
quality: 100,
type: 'jpeg',
puppeteerArgs: {
args: ['--no-sandbox'],
},
encoding: 'buffer',
});
`
output:
what it should look like (different avatar being displayed is not an issue):
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
CSS selector: first div within an id or class
jQuery when passed only an ID selector ( #\w+ ) uses getElementById , and finds the first element with that ID. Anything else...
Read more >:first-of-type | CSS-Tricks - CSS-Tricks
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the...
Read more >first-of-type - CSS: Cascading Style Sheets - MDN Web Docs
The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.
Read more >CSS :first-child Selector
The :first-child selector is used to select the specified selector, only if it is the first child of its parent. Version: CSS2. Browser...
Read more >Documentation
With this, npm run build will generate HTML, JS and CSS files inside the dist ... To change component state and trigger a...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@Nicholas-Ingram The problem arrived due to screen resolution and since the screen is not browser’s screen so it is unable to show responsiveness of bootstrap as browser does by adjusting the elements accordingly.I think your screen is not compatible with bootstrap’s high resolution css classes.I have changed col-lg to col-xs (even col-sm will work fine since these twos works on device having low width & height) and it is working fine for me.I am Attaching the code in the issue_discussion.docx file which will generate the image which you are looking for by replacing col-lg with col-sm and col-xs.
@Nicholas-Ingram does the solution @saksham2105 provided fixed your issue?