Changing icon button size - alignment of text
Jan 12, 2023
Hello everybody,
thanks to this great discussion I learned how to change the size of the icon within a button. However, I have some problems with the text within the button.
In my attached example the space between the text and the upper frame of the button is too big (problem 1) and the gap between the first and second text row is bigger than the space between the other rows which looks strange (problem 2). In addition, I want the text to be left-aligned, but with the space at the beginning of the text which makes the icon bigger you can still see this extra space in the first row which also does not look very professional (problem 3).
I hope I explained my problem understandable and I am sure there will at least one person who can help me with my problems. I have looked through a lot of discussions a lot recently and I am really thankful for every advice I got from them!
Thanks a lot for this great community!
Best
Rebecca
6 Replies
Hi Rebecca,
Thanks for reaching out, and I'm so glad to hear that you're finding the E-Learning Heroes community helpful!
I see what you're saying about the extra spaces with the text. are you comfortable sharing your file so we can investigate further? You can upload it here or privately in a support case. We'll delete it from our systems once troubleshooting is complete.
Thank you very much for the quick reply, Kelly! I opened a support case and will post the solution in this discussion post, which will hopefully help others with the same problem in the future :).
The spacing problems are likely caused by the icon which the system thinks is part of the first line of text. Without knowing how you created it, it is not certain that I can advise you how to fix it. However, there are two possible solutions you might try.
Place the cursor immediately in front of the first letter, and press Return. That might separate the icon and the text into distinct lines.
A more sure method is to delete the icon, adjust the left margin of the button, edit the state of the button, and paste the icon on. Even though the text and icon are distinct objects in the state, they are act and are treated as one object without the problems associated with merely grouping them as a group.
Thanks a lot! Your first solution works, but I then still have the problem of the huge space between the text and the upper frame of the box. This space is responsible for the desired size of the icon...I wanted it to be bigger, and the trick was to increase the space (the trick is from the discussion I referred to in my original post).
I don't know if I got your second solution right, but with that, the icon is to small again which I don't want to.
I just realised, that all what I wanted is an expanding button and that there are other ways to create that. I therefore did something else which ist a lot easier. Thanks a lot anyway!
You’re welcome. Glad you got it solved.