AUI | How to insert an icon in a aui-buttons DIV and have it well rendered

Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 17, 2014

Hi all,

For a new JIRA plugin, I am grouping controls (aui-button, aui-dropdown2) in aui-buttons DIVs. I'd like to add to these groups just an icon. I tried to use <span> to insert icon, but then it's not rendered as the rest. Is there a AUI class to use for this?

A b plan consists in putting the icon in a disabled button, but... That's a b plan...

Any idea anyone?!

5 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes
Answer accepted
Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 22, 2014

Thanks for this example! I found also a way to add the icon to the left of a aui-buttons class div, here is the css:

.my-icon {
	float: left;
	margin-top: 6px;
	margin-right: 5px;}

and the html:

&lt;div class="aui-buttons"&gt;
&lt;span class="aui-icon aui-icon-small aui-iconfont-appswitcher handle my-icon"&gt;&lt;/span&gt;
&lt;button&gt;&lt;span class="aui-icon aui-icon-small aui-iconfont-view"&gt;&lt;/span&gt;&lt;/button&gt;
&lt;/div&gt;

0 votes
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 22, 2014

Didn't realise it was going into an aui form button container. You'll need to add some styles to override some button adjustments. This is expected when you travel off the happy path :)

Try this instead:

&lt;form class="aui"&gt;
    &lt;div class="buttons-container"&gt;
        &lt;span class="aui-icon aui-icon-small aui-iconfont-configure"&gt;Configure&lt;/span&gt;
        &lt;div class="aui-buttons"&gt;
            &lt;button class="aui-button"&gt;Button&lt;/button&gt;
            &lt;button class="aui-button"&gt;Button&lt;/button&gt;
            &lt;button class="aui-button"&gt;Button&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;
&lt;style&gt;
    form.aui .buttons-container &gt; .aui-icon {
        margin-top: 7px;
        vertical-align: top;
    }
    form.aui .buttons-container .aui-buttons .aui-button + .aui-button {
        margin-left: 0;
    }
    form.aui .buttons-container .aui-buttons .aui-button + .aui-button:hover,
    form.aui .buttons-container .aui-buttons .aui-button + .aui-button:focus {
        margin-left: -1px;
    }
&lt;/style&gt;

0 votes
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 22, 2014
Testing something {code}
Configure
<button class="aui-button"> Button</button> <button class="aui-button"> Button</button> <button class="aui-button"> Button</button>
{code}
0 votes
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 22, 2014

I just tried this and it seems to work fine. You can try it out easily using the AUI Sandbox (https://docs.atlassian.com/aui/latest/sandbox/)

&lt;div&gt;
    &lt;span class="aui-icon aui-icon-small aui-iconfont-configure"&gt;Configure&lt;/span&gt;
    &lt;div class="aui-buttons"&gt;
        &lt;button class="aui-button"&gt;Button&lt;/button&gt;
        &lt;button class="aui-button"&gt;Button&lt;/button&gt;
        &lt;button class="aui-button"&gt;Button&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 22, 2014

Having said all of this, it's a bit of a strange requirement. I'm really curious as to why you want an icon there?

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 22, 2014

It doesn't work when the "aui-buttons" div is a child of an "buttons-container" div within an AUI form.

Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 22, 2014

The need to have an icon there is to make a handle for drag & dropping the button group...

0 votes
Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 17, 2014

If you use the AUI icon font, you can put the icon within a <label> element next to the buttons, for example:

&lt;form class="aui"&gt;
    &lt;h2&gt;Configuration&lt;/h2&gt;
    &lt;hr&gt;
    &lt;div class="field-group"&gt;
        &lt;label for="name"&gt;&lt;span class="aui-icon icon-required"&gt;required&lt;/span&gt; Name&lt;/label&gt;
        &lt;input type="text" class="text" name="name" id="name"&gt;
    &lt;/div&gt;
    &lt;div class="buttons-container"&gt;
        &lt;div class="buttons"&gt;
            &lt;label for="clicker"&gt;&lt;span class="aui-icon aui-icon-small aui-iconfont-configure"&gt;Loading...&lt;/span&gt; &lt;/label&gt;
            &lt;button class="aui-button aui-button-primary" id="clicker" name="clicker"&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;

Which looks like this:

Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 18, 2014

Hi Joseph,

Thanks a lot for the tip. That works fine when the container DIV is from field-group class, but it does not work (icon not vertically aligned) when the container DIV is from aui-buttons class.

I tried to make a field-group DIV containg the LABEL and a aui-buttons class DIV (containing itself several buttons), but that does not work, the icon is then not vertically aligned with the rest...

From you picture, my need consists in having several buttons without space between each other, with the "click me button". This is correclty rendered with aui-buttons class...

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 18, 2014

You shouldn't need to put your buttons in a field-group div. In my example, I'm using a buttons-container and a buttons div.

Can you show me the HTML layout you have so far?

Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 18, 2014

Here is the result of adding a LABEL with an icon to a aui-buttons DIV:

aui-buttons

And here is the result with buttons-container DIV:

buttons-container

So to sum up, I'd like to have the vertical alignment as with buttons-container, but with the buttons "touching each other" as with aui-buttons...

... Possible?!

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 18, 2014

OK, I understand now :) Let me have another go at it.

Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 18, 2014

Yes, a picture is often better than a long explanation ;-) Again, there is a b plan inserting to an aui-buttons div a disabled button with the SPAN icon in it, but this is a b plan as when the button is disabled, the icon color is changed...

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 18, 2014

If you want to pursue the bug further, I suggest you raise a new JIRA issue on https://ecosystem.atlassian.net/browse/AUI

Joe Clark
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 18, 2014

OK, it looks like it is impossible to do this using default AUI styles, because the buttons-container styles will always override the aui-buttons styles. This is disappointing, and I actually think this is a bug that should be fixed.

In the meantime, you can work around this by applying some custom CSS to your buttons. These styles:

.my-aui-button {
    margin-left: 0 !important;
}

.my-aui-button:hover, .my-aui-button:focus, .my-aui-button:active {
    border-width: 1px !important;
    margin-left: -1px !important;
    position: relative !important;
}

Plus this HTML:

&lt;form class="aui"&gt;
    &lt;h2&gt;Configuration&lt;/h2&gt;
    &lt;hr&gt;
    &lt;div class="field-group"&gt;
        &lt;label for="name"&gt;&lt;span class="aui-icon icon-required"&gt;required&lt;/span&gt; Name&lt;/label&gt;
        &lt;input type="text" class="text" name="name" id="name"&gt;
    &lt;/div&gt;
    &lt;div class="buttons-container"&gt;
        &lt;span class="aui-icon aui-icon-small aui-iconfont-configure"&gt;Loading...&lt;/span&gt;
        &lt;div class="aui-buttons" style="margin-top: 10px;"&gt;
            &lt;button class="aui-button aui-dropdown2-trigger"&gt;Texte 1&lt;/button&gt;
            &lt;button class="aui-button my-aui-button"&gt;&lt;span class="aui-icon aui-icon-small aui-iconfont-view"&gt;View &lt;/span&gt; &lt;/button&gt;
        &lt;/div&gt;   
    &lt;/div&gt; 
&lt;/form&gt;

Gives this result:

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events