- This topic has 5 replies, 4 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
Hi,
Is it possible to have a button at the end of a line of text?
So in the same container there would be a heading and next to it a button:
“This is the inline heading [button next to it]”Thanks,
DanCustomer Support
Hi Dan,
There’s no inline buttons block currently, you can try wrapping a Grida as screenshot below:
https://www.screencast.com/t/7wPLGujKgCYou could also try to give the Buttons block a custom class eg.
inline-button, then add this CSS:.gb-button-wrapper.inline-button { display: inline-flex; }The problem with the grid solution is that there are two containers to achieve this look. This introduces issues of height control (paragraph vs button height), and the ability to centre both paragraph and button as a single unit to the page. Even when right aligning paragraph content in the left container (assuming 50% width), and left aligning button content in the right container (assuming 50% width), the overall centring of the grid is not achieved.
If everything was in a single container, centring in respect of the page could be achieved correctly.
Customer Support
Hi there,
is there a specific issue you need help with ?
If you want to raise a new topic, where you can use the Private Info field to share a link to where we can see an issue, then we can take a look.Hi David – yes there is something you could hopefully assist with. As this deals directly with the OP’s post, I’ve just added my comment here instead of opening a new topic. I’m trying to add a button to the end of a text line. So it would be container >> paragraph >> button if you were looking at it in List view. The sentence and the button need to be next to each other in one line and centre-aligned horizontally. I’ve tried both solutions suggested by Ying, but they do not work. The inline-button option does not seem to work, as the button still appears below the text, and the option of adding two containers (as per Ying’s screenshot) does not center-align both paragraph and button to the page.
I’m stumped as to why it remains such a difficult thing to achieve – button next to text. How difficult should this be?
Hopefully, you can help.
You would need to edit the text block in the HTML editor. ie. Select the text block, and from the toolbar 3 dot menu select Edit as HTML. You will see something like this:
<p>Some text inside the text block</p>Edit that to include an anchor link with some classes to style it like a button:
<p>Some text inside the text block <a class="button custom-class" href="the_url">Button label<a/></p>custom-classyou can swap out for your own CSS class if you want to style it different to themes button styles.
- You must be logged in to reply to this topic.
