Hello Bubblers,
I really need to figure out how to make the button background responsive according to the characters of text inside the button. Is it not a good idea to have this on the roadmap for button option?
Haven’t found an answer to this question yet.
Thanks everyone,
Can you expand on what it is you’re looking for? (Ie. a mockup / illustration). Based on what you shared, not sure I follow.
The background should be responsive. These rounded shapes are buttons.
I can’t seem to find the part of the HTML which I need for my project as there is a long list of HTML text for css and fonts. Would hope someone can point out a specific solution.
@nocodeventure Here is an example 
(I’m not 100% sure how AirDev created this originally, but this is how I’ve edited it in the past)
Preview:
Editor:
It looks like the HTML in the Page header in the AirDev example no longer modifies the HTML elements in the RG cell (might be a Bubble bug since that worked previously). For now, I put the code in the HTML element here:
In this element, the div is named “notification-count”:
And the styling for that is referenced in this part of the HTML:
I placed the HTML element in a group, incase you need to add a workflow when the notification count is clicked. I think that should work!
Thankyou for taking the time to explain your answer.
I understand your creative workaround but im still wondering why Bubble has not made the button background responsive or some kind of setting which we could select so that the button is automatically responsive and floating to the right or center of a group its placed in.
Is this something planned for in the future?
No problem! I’m not sure if it’s something that Bubble has planned for the future. I think something similar could be created by a plugin developer to make it easier for people to use and modify the styling, without needing to use the HTML element.
So it should be possible to create a plugin with responsive buttons? or a plugin repository of existing UI buttons from other frameworks?
Thanks for this explanation!
What is the reason behind the body, section and clear things in your code?
I cleaned it up and everything works fine.
<div class="notification-count">
Parent group's Organisation's Contacts:count</div>
<style>
.notification-count {
font-family: "Open Sans" !important;
font-size: 13px !important;
font-weight: normal;
position:relative;
padding:5px 10px;
color:#333333;
background:#D8D8D8;
border-radius:15px;
float: right !important;
}
</style>@nocodeventure The elements are not responsive in width themselves, but the HTML styling in this example creates that “chat Bubble” effect so the background color only stretches as far as the text. This works in a vertical RG, but would not look good if the elements were in a horizontal rg. If you were to place the elements side-by-side, the elements themselves would have the same width at all times (as defined in the editor), but the styling would make them look like bubbles. My thought was that it would be possible to create a plugin which accomplishes the chat bubble effect as well, to make it easier for Bubblers to add that element to an RG, modify the font, background color, size, etc. (Neither would have an actual responsive width, it would just have the chat Bubble effect.) My apologies for any confusion!
@mike_verbruggen Thank you for fixing that! Originally it was in the page header of the AirDev example where the styling modified two divs in their messaging example, so I think that’s why it had those sections. (I know basically zero code and wasn’t sure what else to take out). Will update the demo shortly with the correct version you have!