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?!
Community moderators have prevented the ability to post new answers.
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:
<div class="aui-buttons"> <span class="aui-icon aui-icon-small aui-iconfont-appswitcher handle my-icon"></span> <button><span class="aui-icon aui-icon-small aui-iconfont-view"></span></button> </div>
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:
<form class="aui"> <div class="buttons-container"> <span class="aui-icon aui-icon-small aui-iconfont-configure">Configure</span> <div class="aui-buttons"> <button class="aui-button">Button</button> <button class="aui-button">Button</button> <button class="aui-button">Button</button> </div> </div> </form> <style> form.aui .buttons-container > .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; } </style>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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/)
<div> <span class="aui-icon aui-icon-small aui-iconfont-configure">Configure</span> <div class="aui-buttons"> <button class="aui-button">Button</button> <button class="aui-button">Button</button> <button class="aui-button">Button</button> </div> </div>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
It doesn't work when the "aui-buttons" div is a child of an "buttons-container" div within an AUI form.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
The need to have an icon there is to make a handle for drag & dropping the button group...
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
If you use the AUI icon font, you can put the icon within a <label> element next to the buttons, for example:
<form class="aui"> <h2>Configuration</h2> <hr> <div class="field-group"> <label for="name"><span class="aui-icon icon-required">required</span> Name</label> <input type="text" class="text" name="name" id="name"> </div> <div class="buttons-container"> <div class="buttons"> <label for="clicker"><span class="aui-icon aui-icon-small aui-iconfont-configure">Loading...</span> </label> <button class="aui-button aui-button-primary" id="clicker" name="clicker">Click Me</button> </div> </div> </form>
Which looks like this:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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...
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Here is the result of adding a LABEL with an icon to a aui-buttons DIV:
And here is the result with buttons-container DIV:
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?!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
OK, I understand now :) Let me have another go at it.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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...
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
If you want to pursue the bug further, I suggest you raise a new JIRA issue on https://ecosystem.atlassian.net/browse/AUI
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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:
<form class="aui"> <h2>Configuration</h2> <hr> <div class="field-group"> <label for="name"><span class="aui-icon icon-required">required</span> Name</label> <input type="text" class="text" name="name" id="name"> </div> <div class="buttons-container"> <span class="aui-icon aui-icon-small aui-iconfont-configure">Loading...</span> <div class="aui-buttons" style="margin-top: 10px;"> <button class="aui-button aui-dropdown2-trigger">Texte 1</button> <button class="aui-button my-aui-button"><span class="aui-icon aui-icon-small aui-iconfont-view">View </span> </button> </div> </div> </form>
Gives this result:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Community moderators have prevented the ability to post new answers.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.