Chat message bubble cut of on mobile randomly

How do I reset the sizing of the message bubble. It’s always worked fine but when my partner tried using his account to send a message to a service provider, the latest message gets cut off. I haven’t changed the settings. The default on chat messages reusable element is “stretch to fit content” as checked

Also, how do I change the distance integer from miles to Km. Not just the text title (which I’ve done on my duplicate test site in the image below) the actual number doesn’t read in Km

Thanks!

Hi @lizzyazuya! :slight_smile: Is the message being cut off in every message or only in some messages? I’m not 100% sure on this but I think this can sometimes happen if there is a long word or long URL in the message. Is that the case for the message that you posted a screenshot of?

In regards to using km instead of miles, this can be changed by clicking on the “miles” text within the repeating group’s constraint that will utilize the km input value:

Hi Faye,

Only some messages. I guess the URL was the cause because the message had a URL. Is there a way to resolve that. URLs will rarely ever be shared there but we were trying to send surveys out to certain service providers. The URLs also weren’t hyperlinked

For miles to km, I’ve just changed. Thanks!

Sorry, one more thing. The Kms switch impacts the dial on the sidebar but the listings still have for example (2.7 mi)

@lizzyazuya Ah, got it! In regards to the long URL not breaking to the next line, I think that the HTML element may not contain the “word-wrap” property. If you add this, does that cause the URL to break to the next line?

(Just for reference, here is the current CSS of the messenger widget but it may vary slightly from the HTML of previous messenger versions)

<style>

body {
	font-family: "Inter" !important;
	font-size: 16px !important;
	font-weight: normal;
}

section {
	max-width: 450px;
	margin: 50px auto;

	div {
		max-width: 320px;
		word-wrap: break-word;
		margin-bottom: 20px;
    line-height: 24px;
	}
}

.clear {clear: both}
.from-me {
	position:relative;
	padding:10px 20px;
	color:#ffffff; 
background: linear-gradient(to bottom right, #349DFB 0%,  #067BFB 100%);	
border-radius:20px;
        border-top-right-radius:0px;
        line-height:18px;
	float: right !important;


		
	&:before {
		content:"";
		position:absolute;
		z-index:-1;
		bottom:-2px;
		right:-7px;
		height:24px;
		border-right:20px solid #0B93F6;
		border-bottom-left-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
	}

	&:after {
		content:"";
		position:absolute;
		z-index:1;
		bottom:-2px;
		right:-56px;
		width:26px;
		height:28px;
		background:white;
		border-bottom-left-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
	}
}
.from-them {
	position:relative;
	padding:10px;
background: linear-gradient(to bottom right, #fafafa 0%,  #e6e6e6 100%);	
border-radius:20px;	border-radius:20px;
        border-top-left-radius:0px;
        line-height:18px;
	color: #333333;
  float: left;
		
	&:before {
		content:"";
		position:absolute;
		z-index:2;
		bottom:-2px;
		left:-7px;
		height:24px;
		border-left:20px solid #E5E5EA;
		border-bottom-right-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
	}

	&:after {
		content:"";
		position:absolute;
		z-index:3;
		bottom:-2px;
		left:4px;
		width:26px;
		height:24px;
		background:white;
		border-bottom-right-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
	}
}
</style>

For the kms to display in a repeating group, the text element within the repeating group that displays the distance may need to be changed from “mi” to “km” as well. Does that fix it or are you referring to something else? :slight_smile:

Thanks Faye! Changed to Km for repeating group

1 Like

Also re:first point forgot to add yesterday. Mine currently already has the “word-wrap” property and URL still chops off

@lizzyazuya Ah, got it! Thank you for flagging that! It looks like the styling may be applied differently or not applied at all in some browsers. This Stack Overflow thread suggests adding white-space: normal just above the word-wrap: break-word; in order for it to work as expected. Is there a difference after adding that to the HTML?

It’s a bit of an odd one. Still not working. For now, I’ll just not include URLs in the chat messages

Thanks, @lizzyazuya! I’m going to run some tests on this, and I’ll reply back as soon as I know of the fix!