ComboBoxEx drop down in the wrong place on screen

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

ComboBoxEx drop down in the wrong place on screen

John Spackman

Hi guys,

 

I’m having some odd layout issues with 0.7.3 and ComboBoxEx where the drop down is some distance away from the combo box itself, and the items in the list are centred rather than left justified.  Also, if I right-click the combobox, the “Search” context menu appears briefly for a fraction of a second and then moves to roughly the same place as the drop down.  Any ideas?

 

I stripped my app down to just a combo and it still happens, so the only thing I can think of that might cause this is that I’m using the “Inline” method to integrate it inside an existing website design. 

 

John


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: ComboBoxEx drop down in the wrong place on screen

Alexander Back
Hi John,

do you already tested your ComboBoxEx widget inside a qooxdoo
application to get to know the "Inline" usage is the problem?
How do you setup the "Inline" usage?

cheers,
   Alex

John Spackman wrote:

> Hi guys,
>
>  
>
> I'm having some odd layout issues with 0.7.3 and ComboBoxEx where the drop
> down is some distance away from the combo box itself, and the items in the
> list are centred rather than left justified.  Also, if I right-click the
> combobox, the "Search" context menu appears briefly for a fraction of a
> second and then moves to roughly the same place as the drop down.  Any
> ideas?
>
>  
>
> I stripped my app down to just a combo and it still happens, so the only
> thing I can think of that might cause this is that I'm using the "Inline"
> method to integrate it inside an existing website design.  
>
> John

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: ComboBoxEx drop down in the wrong place on screen

John Spackman
Hi Alex,

Sorry it's taken so long to get back to this one and get a simple test case,
but I've finally done it.  I had two problems with my combobox: 1) the drop
down was off to one side somewhere, and 2) the text in each line was
horizontally centred; I mention them both because they seem to be triggered
by the same bug.  This affects FF3 and IE7.

My sample code is below, but it's worth noting that the problem with
positioning the drop down goes away if you remove the DOCTYPE declaration
and/or remove the "qxsettings['qx.enableApplicationLayout'] = false;".  

The problem where the rows in the drop down are centred is caused by our CSS
- the body tag has "text-align: center" but has a single tag inside it with
the id=wrapper that has "text-align: left"; this is to get around an IE6 bug
with centring content.  

The drop down is created as a child of the body tag which is why it has the
"text-align:center" style set, and presumably is also why the drop down is
positioned off to the side.

Regards,
John

============================ qxtest.html ===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <link href="/public/qxtest.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="wrapper">
                <div id="header">
                        <h1>Admin</h1>
                </div>
                <div id="topNav">
               
                </div>
                <div id="content">
                        <form>
                          <script type="text/javascript">qxsettings = new
Object(); qxsettings['qx.enableApplicationLayout'] = false;</script>
                          <script type="text/javascript"
src="/public/source/script/custom.js"></script>
                        </form>
                </div>
        </div>
</body>
</html>

========================== custom/Application.js =========================

qx.Class.define("custom.Application", {
        extend : qx.application.Gui,

        members : {
                main : function() {
  this.base(arguments);
 
                        var app =
qx.core.Init.getInstance().getApplication();
                        var doc = qx.ui.core.ClientDocument.getInstance();
                  myInlineWidget = new qx.ui.basic.Inline("content");
                  doc.add(myInlineWidget);
                       
                        atom = new qx.ui.form.ComboBoxEx();
                        atom.setSelection([['1', 'uk'], ['2', 'germany'],
['3', 'france']]);
                        myInlineWidget.add(atom);
                }

        }
});

================================ /public/qxtest.css
==================================
*
{
margin: 0px;
padding: 0px;
}
body
{
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        text-align: center;
}
#wrapper
{
        text-align: left;
        margin: 10px;
        border: 1px solid #6b6b6b;
}
#header
{
        position: relative;
        height: 60px;
}

#topNav
{
        height: 30px;
        border: 1px solid #858499;
        margin: 2px;
}

-----Original Message-----
From: [hidden email]
[mailto:[hidden email]] On Behalf Of Alexander
Back
Sent: 18 August 2008 08:32
To: qooxdoo Development
Subject: Re: [qooxdoo-devel] ComboBoxEx drop down in the wrong place on
screen

Hi John,

do you already tested your ComboBoxEx widget inside a qooxdoo
application to get to know the "Inline" usage is the problem?
How do you setup the "Inline" usage?

cheers,
   Alex

John Spackman wrote:

> Hi guys,
>
>  
>
> I'm having some odd layout issues with 0.7.3 and ComboBoxEx where the drop
> down is some distance away from the combo box itself, and the items in the
> list are centred rather than left justified.  Also, if I right-click the
> combobox, the "Search" context menu appears briefly for a fraction of a
> second and then moves to roughly the same place as the drop down.  Any
> ideas?
>
>  
>
> I stripped my app down to just a combo and it still happens, so the only
> thing I can think of that might cause this is that I'm using the "Inline"
> method to integrate it inside an existing website design.  
>
> John

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great
prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: ComboBoxEx drop down in the wrong place on screen

John Spackman
Any news on this, anyone?  Although I can fix the problem by not setting
"qx.enableApplicationLayout=false", is that a good thing to do?  IE will
there be undesirable side effects etc?

John

-----Original Message-----
From: [hidden email]
[mailto:[hidden email]] On Behalf Of John
Spackman
Sent: 21 August 2008 13:06
To: [hidden email]; 'qooxdoo Development'
Subject: Re: [qooxdoo-devel] ComboBoxEx drop down in the wrong place on
screen

Hi Alex,

Sorry it's taken so long to get back to this one and get a simple test case,
but I've finally done it.  I had two problems with my combobox: 1) the drop
down was off to one side somewhere, and 2) the text in each line was
horizontally centred; I mention them both because they seem to be triggered
by the same bug.  This affects FF3 and IE7.

My sample code is below, but it's worth noting that the problem with
positioning the drop down goes away if you remove the DOCTYPE declaration
and/or remove the "qxsettings['qx.enableApplicationLayout'] = false;".  

The problem where the rows in the drop down are centred is caused by our CSS
- the body tag has "text-align: center" but has a single tag inside it with
the id=wrapper that has "text-align: left"; this is to get around an IE6 bug
with centring content.  

The drop down is created as a child of the body tag which is why it has the
"text-align:center" style set, and presumably is also why the drop down is
positioned off to the side.

Regards,
John

============================ qxtest.html ===============================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <link href="/public/qxtest.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="wrapper">
                <div id="header">
                        <h1>Admin</h1>
                </div>
                <div id="topNav">
               
                </div>
                <div id="content">
                        <form>
                          <script type="text/javascript">qxsettings = new
Object(); qxsettings['qx.enableApplicationLayout'] = false;</script>
                          <script type="text/javascript"
src="/public/source/script/custom.js"></script>
                        </form>
                </div>
        </div>
</body>
</html>

========================== custom/Application.js =========================

qx.Class.define("custom.Application", {
        extend : qx.application.Gui,

        members : {
                main : function() {
  this.base(arguments);
 
                        var app =
qx.core.Init.getInstance().getApplication();
                        var doc = qx.ui.core.ClientDocument.getInstance();
                  myInlineWidget = new qx.ui.basic.Inline("content");
                  doc.add(myInlineWidget);
                       
                        atom = new qx.ui.form.ComboBoxEx();
                        atom.setSelection([['1', 'uk'], ['2', 'germany'],
['3', 'france']]);
                        myInlineWidget.add(atom);
                }

        }
});

================================ /public/qxtest.css
==================================
*
{
margin: 0px;
padding: 0px;
}
body
{
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        text-align: center;
}
#wrapper
{
        text-align: left;
        margin: 10px;
        border: 1px solid #6b6b6b;
}
#header
{
        position: relative;
        height: 60px;
}

#topNav
{
        height: 30px;
        border: 1px solid #858499;
        margin: 2px;
}

-----Original Message-----
From: [hidden email]
[mailto:[hidden email]] On Behalf Of Alexander
Back
Sent: 18 August 2008 08:32
To: qooxdoo Development
Subject: Re: [qooxdoo-devel] ComboBoxEx drop down in the wrong place on
screen

Hi John,

do you already tested your ComboBoxEx widget inside a qooxdoo
application to get to know the "Inline" usage is the problem?
How do you setup the "Inline" usage?

cheers,
   Alex

John Spackman wrote:

> Hi guys,
>
>  
>
> I'm having some odd layout issues with 0.7.3 and ComboBoxEx where the drop
> down is some distance away from the combo box itself, and the items in the
> list are centred rather than left justified.  Also, if I right-click the
> combobox, the "Search" context menu appears briefly for a fraction of a
> second and then moves to roughly the same place as the drop down.  Any
> ideas?
>
>  
>
> I stripped my app down to just a combo and it still happens, so the only
> thing I can think of that might cause this is that I'm using the "Inline"
> method to integrate it inside an existing website design.  
>
> John

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great
prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great
prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel




-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: ComboBoxEx drop down in the wrong place on screen

Alexander Back
Hi John,

first of all sorry for the late answer.

If you want to use qooxdoo widgets inside your existing HTML page you
have to set this setting to "false". This setting inserts (if it has the
value "true") the following stylesheet into your page

--snip--
html,body{width:100%;height:100%;overflow:hidden;}
--snip--

This is needed for qooxdoo applications to work properly.

By the way: the support for using qooxdoo widgets inline has improved
with the upcoming 0.8 release. If using 0.8 for your application is an
option you can check out the already available RC1. (
http://news.qooxdoo.org/first-release-candidate-of-qooxdoo-08 )

cheers,
   Alex

P.S. some more infos to use a widget inline:
http://qooxdoo.org/documentation/0.7/inline_widget

John Spackman wrote:

> Any news on this, anyone?  Although I can fix the problem by not setting
> "qx.enableApplicationLayout=false", is that a good thing to do?  IE will
> there be undesirable side effects etc?
>
> John
>
> -----Original Message-----
> From: [hidden email]
> [mailto:[hidden email]] On Behalf Of John
> Spackman
> Sent: 21 August 2008 13:06
> To: [hidden email]; 'qooxdoo Development'
> Subject: Re: [qooxdoo-devel] ComboBoxEx drop down in the wrong place on
> screen
>
> Hi Alex,
>
> Sorry it's taken so long to get back to this one and get a simple test case,
> but I've finally done it.  I had two problems with my combobox: 1) the drop
> down was off to one side somewhere, and 2) the text in each line was
> horizontally centred; I mention them both because they seem to be triggered
> by the same bug.  This affects FF3 and IE7.
>
> My sample code is below, but it's worth noting that the problem with
> positioning the drop down goes away if you remove the DOCTYPE declaration
> and/or remove the "qxsettings['qx.enableApplicationLayout'] = false;".  
>
> The problem where the rows in the drop down are centred is caused by our CSS
> - the body tag has "text-align: center" but has a single tag inside it with
> the id=wrapper that has "text-align: left"; this is to get around an IE6 bug
> with centring content.  
>
> The drop down is created as a child of the body tag which is why it has the
> "text-align:center" style set, and presumably is also why the drop down is
> positioned off to the side.
>
> Regards,
> John
>
> ============================ qxtest.html ===============================
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <link href="/public/qxtest.css" rel="stylesheet" type="text/css" />
> </head>
> <body>
> <div id="wrapper">
> <div id="header">
> <h1>Admin</h1>
> </div>
> <div id="topNav">
>
> </div>
> <div id="content">
> <form>
>  <script type="text/javascript">qxsettings = new
> Object(); qxsettings['qx.enableApplicationLayout'] = false;</script>
>  <script type="text/javascript"
> src="/public/source/script/custom.js"></script>
> </form>
> </div>
> </div>
> </body>
> </html>
>
> ========================== custom/Application.js =========================
>
> qx.Class.define("custom.Application", {
> extend : qx.application.Gui,
>
> members : {
> main : function() {
>   this.base(arguments);
>  
> var app =
> qx.core.Init.getInstance().getApplication();
> var doc = qx.ui.core.ClientDocument.getInstance();
>   myInlineWidget = new qx.ui.basic.Inline("content");
>   doc.add(myInlineWidget);
>
> atom = new qx.ui.form.ComboBoxEx();
> atom.setSelection([['1', 'uk'], ['2', 'germany'],
> ['3', 'france']]);
> myInlineWidget.add(atom);
> }
>
> }
> });
>
> ================================ /public/qxtest.css
> ==================================
> *
> {
> margin: 0px;
> padding: 0px;
> }
> body
> {
> font-family: verdana, arial, sans-serif;
> font-size: 11px;
> text-align: center;
> }
> #wrapper
> {
> text-align: left;
> margin: 10px;
> border: 1px solid #6b6b6b;
> }
> #header
> {
> position: relative;
> height: 60px;
> }
>
> #topNav
> {
> height: 30px;
> border: 1px solid #858499;
> margin: 2px;
> }
>
> -----Original Message-----
> From: [hidden email]
> [mailto:[hidden email]] On Behalf Of Alexander
> Back
> Sent: 18 August 2008 08:32
> To: qooxdoo Development
> Subject: Re: [qooxdoo-devel] ComboBoxEx drop down in the wrong place on
> screen
>
> Hi John,
>
> do you already tested your ComboBoxEx widget inside a qooxdoo
> application to get to know the "Inline" usage is the problem?
> How do you setup the "Inline" usage?
>
> cheers,
>    Alex
>
> John Spackman wrote:
>> Hi guys,
>>
>>  
>>
>> I'm having some odd layout issues with 0.7.3 and ComboBoxEx where the drop
>> down is some distance away from the combo box itself, and the items in the
>> list are centred rather than left justified.  Also, if I right-click the
>> combobox, the "Search" context menu appears briefly for a fraction of a
>> second and then moves to roughly the same place as the drop down.  Any
>> ideas?
>>
>>  
>>
>> I stripped my app down to just a combo and it still happens, so the only
>> thing I can think of that might cause this is that I'm using the "Inline"
>> method to integrate it inside an existing website design.  
>>
>> John
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
> Build the coolest Linux based applications with Moblin SDK & win great
> prizes
> Grand prize is a trip for two to an Open Source event anywhere in the world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
> Build the coolest Linux based applications with Moblin SDK & win great
> prizes
> Grand prize is a trip for two to an Open Source event anywhere in the world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
> Build the coolest Linux based applications with Moblin SDK & win great prizes
> Grand prize is a trip for two to an Open Source event anywhere in the world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

--
Alexander Back
Core Development::Webtechnologies
[hidden email]
fon +49 721 91374 8047
http://www.1und1.de

1&1 Internet AG
Ernst-Frey-Stra├če 9
76135 Karlsruhe

Amtsgericht Montabaur HRB 6484
Vorstand: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas
Gottschlich, Matthias Greve, Robert Hoffmann, Markus Huhn, Oliver Mauss,
Achim Weiss
Aufsichtsratsvorsitzender: Michael Scheeren

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel