You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@cloudstack.apache.org by Mike Tutkowski <mi...@solidfire.com> on 2014/08/10 06:20:25 UTC
[GSoC] GUI Problem
Hi everyone,
My GSoC student has been working on a GUI problem for a while and we'd like
to see if anyone out there who might have a detailed knowledge of
CloudStack's GUI code and JavaScript/CSS in general could help.
Seif is trying to add a new control to the CS GUI:
http://loopj.com/jquery-tokeninput/
He's first trying to swap out one existing text field for this control: the
Storage Tags text field in the Add Primary Storage dialog.
Right now this Storage Tags is just a normal text field. You type in one or
more tags (separated by a comma).
This new control provides suggestions (Seif acquires all storage tags from
the DB via a new API call he wrote) and lets you click on a suggestion to
add it to the control's text field. JIRA has a similar control.
A nice benefit of this approach is that you don't have to guess at the name
of a storage tag that you want to use if that storage tag is already in use
(you can just select it from the list of suggestions as you type).
Anyways, Seif has most all of the code written, but is having trouble
getting the suggestions list to actually show up in the CS GUI (it shows up
just fine in a demo program he built).
His current code in in my GitHub cloudstack repo here:
https://github.com/mike-tutkowski/cloudstack/commit/c0e58040663e641dccac6c3586ddd07ff4382b9e
I'm not seeing any obvious problem with his code, but I'm way more
experienced in Java than in JavaScript.
Thanks!
--
*Mike Tutkowski*
*Senior CloudStack Developer, SolidFire Inc.*
e: mike.tutkowski@solidfire.com
o: 303.746.7302
Advancing the way the world uses the cloud
<http://solidfire.com/solution/overview/?video=play>*™*
Re: [GSoC] GUI Problem
Posted by Mike Tutkowski <mi...@solidfire.com>.
Thanks, Ian!
On Sun, Aug 10, 2014 at 9:07 AM, Ian Duffy <ia...@ianduffy.ie> wrote:
> You are correct in saying its a CSS issue.
>
> The token-input-dropdown box has its position set to absolute. This
> introduces layering.
>
> Its parent element, the ui-dialog box is also set to position absolute. It
> has a z-index set of 1010.
>
> Your token-input-dropdown has a z-index of 1 which means it will always be
> underneath the ui-dialog.
>
> Modify the CSS to set a z-index greater than 1010 on your
> token-input-dropdown.
>
--
*Mike Tutkowski*
*Senior CloudStack Developer, SolidFire Inc.*
e: mike.tutkowski@solidfire.com
o: 303.746.7302
Advancing the way the world uses the cloud
<http://solidfire.com/solution/overview/?video=play>*™*
Re: [GSoC] GUI Problem
Posted by Ian Duffy <ia...@ianduffy.ie>.
You are correct in saying its a CSS issue.
The token-input-dropdown box has its position set to absolute. This
introduces layering.
Its parent element, the ui-dialog box is also set to position absolute. It
has a z-index set of 1010.
Your token-input-dropdown has a z-index of 1 which means it will always be
underneath the ui-dialog.
Modify the CSS to set a z-index greater than 1010 on your
token-input-dropdown.
Re: [GSoC] GUI Problem
Posted by Mike Tutkowski <mi...@solidfire.com>.
>From what we can tell, it seems to be a rendering issue. The data is intact
when we click in the text field (we can see that in the debugger). It's
just that the suggestion list (created with <div>, <ul>, and <li> elements)
doesn't show up.
Perhaps a CSS issue?
On Sat, Aug 9, 2014 at 10:20 PM, Mike Tutkowski <
mike.tutkowski@solidfire.com> wrote:
> Hi everyone,
>
> My GSoC student has been working on a GUI problem for a while and we'd
> like to see if anyone out there who might have a detailed knowledge of
> CloudStack's GUI code and JavaScript/CSS in general could help.
>
> Seif is trying to add a new control to the CS GUI:
>
> http://loopj.com/jquery-tokeninput/
>
> He's first trying to swap out one existing text field for this control:
> the Storage Tags text field in the Add Primary Storage dialog.
>
> Right now this Storage Tags is just a normal text field. You type in one
> or more tags (separated by a comma).
>
> This new control provides suggestions (Seif acquires all storage tags from
> the DB via a new API call he wrote) and lets you click on a suggestion to
> add it to the control's text field. JIRA has a similar control.
>
> A nice benefit of this approach is that you don't have to guess at the
> name of a storage tag that you want to use if that storage tag is already
> in use (you can just select it from the list of suggestions as you type).
>
> Anyways, Seif has most all of the code written, but is having trouble
> getting the suggestions list to actually show up in the CS GUI (it shows up
> just fine in a demo program he built).
>
> His current code in in my GitHub cloudstack repo here:
>
>
> https://github.com/mike-tutkowski/cloudstack/commit/c0e58040663e641dccac6c3586ddd07ff4382b9e
>
> I'm not seeing any obvious problem with his code, but I'm way more
> experienced in Java than in JavaScript.
>
> Thanks!
>
> --
> *Mike Tutkowski*
> *Senior CloudStack Developer, SolidFire Inc.*
> e: mike.tutkowski@solidfire.com
> o: 303.746.7302
> Advancing the way the world uses the cloud
> <http://solidfire.com/solution/overview/?video=play>*™*
>
--
*Mike Tutkowski*
*Senior CloudStack Developer, SolidFire Inc.*
e: mike.tutkowski@solidfire.com
o: 303.746.7302
Advancing the way the world uses the cloud
<http://solidfire.com/solution/overview/?video=play>*™*