New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Whatsapp baloon html #385

Closed
shinesoftware opened this Issue Sep 24, 2018 · 5 comments

Comments

Projects
None yet
2 participants
@shinesoftware

shinesoftware commented Sep 24, 2018

Hi guys,

is there a way to create a simple Whatsapp page style like this by html code?

image

I have created the pdf attached as idea...

document.pdf

thanks!

@spipu

This comment has been minimized.

Owner

spipu commented Sep 24, 2018

try to use the border-radius css properties

@spipu spipu added the help wanted label Sep 24, 2018

@shinesoftware

This comment has been minimized.

shinesoftware commented Sep 24, 2018

already done but I need to create the triangle close the box.
document (1).pdf

<style>
.baloon {
	display: inline-block; /* this has been added */
	border-radius: 5px;
	background-color: #ffffff;
	color: black;
	border: 5px solid white;
	padding:15px;
	position:relative;
}​
.baloon:before {
  content: ' >';
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid #00bfb6;
  border-right: 10px solid transparent;
  border-top: 10px solid #00bfb6;
  border-bottom: 10px solid transparent;
  right: -20px;
  top: 6px;
}
</style>

<page backimg='http://backgroundcheckall.com/wp-content/uploads/2017/12/whatsapp-chat-background.jpg'>
		<table cellspacing='20'>
			<col width='300'>
			<col width='100'>
			<col width='300'>
			<tr>
				<td><div class='baloon'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum. In id consectetur enim. Donec eu erat ut magna consectetur vestibulum ac malesuada turpis. Suspendisse turpis risus, feugiat id gravida eu, euismod id orci. Nunc egestas ut erat molestie rutrum. Morbi posuere posuere sapien sed mattis. Fusce dapibus nunc leo, viverra mollis massa varius non. Ut in maximus quam. Aliquam volutpat consectetur odio, sed viverra eros tincidunt non. Ut consequat mi maximus congue faucibus. Morbi id finibus nisi.</div></td>
				<td style='background-color: transparent; border:0px'>&nbsp;</td>
				<td><div class='baloon'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></td>
			</tr>
			<tr>
				<td><div class='baloon'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum.</div></td>
				<td style='background-color: transparent; border:0px'>&nbsp;</td>
				<td><div class='baloon'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></td>
			</tr>
		</table>       
</page>
@shinesoftware

This comment has been minimized.

shinesoftware commented Sep 25, 2018

Up

spipu added a commit that referenced this issue Oct 26, 2018

@spipu

This comment has been minimized.

Owner

spipu commented Oct 26, 2018

Hi,
i test, and there was some errors on the css parser. I fix them on the master branch.
I provide also a example in the new balloon example.

all this will be in the next release

@spipu spipu closed this Oct 26, 2018

@spipu

This comment has been minimized.

Owner

spipu commented Oct 26, 2018

It is now available in th 5.2.1 release

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment