The application layout setting just change the behavior the client
document has on the page. If enabled it reconfigures the layout to omit
any top-level scrollbars and changes the dimensions of the body element
to 100%.
What you need to do, if you do not want the default styling however, is
to disable the appearance the client document applies to the document.
This is a completely other thing. Two options:
* write your own appearance theme and override "client-document" to do
not apply a background color
* modify the client document at runtime e.g. through:
qx.ui.core.ClientDocument.getInstance().setBackgroundColor(null);
Hope this helps.
Sebastian
Kristjan Cočev schrieb:
> Thomas, thanks for your quick reply.
> The problem is the following.
> I do NOT set any background color properties, but it somehow defaults to
> gray. I would have no problem if that occured in the <div>, but it
> sets the
> color for the whole window...
>
> So, from the code, I guess all that matters is the following:
>
>>> <script type="text/javascript">
>>> qxsettings = new Object();
>>> qxsettings["qx.enableApplicationLayout"] = false;
>>> qxsettings["qx.boxModelCorrection"] = true;
>>> //qxsettings = { "qx.enableApplicationLayout" : "false" };
>>> </script>
>
> When I specified the qx.enableApplicationLayout=false,
> that should mean the application only occurs in the <div>, as I have
> understood.
>
> Than I set the div id with the following line:
>
> var inlineWidget = new qx.ui.basic.Inline("iframe1");
>
> where iframe1 is the id of the containing <div>
>
> But the whole screen gets painted gray.
>
> I think it has to do with the following css code:
>
> element.style {
> -moz-user-focus:normal;
> -moz-user-select:none;
> background-color:#EBE9ED;
> }
>
> That (background-color:#EBE9ED;) overrides the setting in the "more
> general" css tag:
>
> html, body {
> background-color:white;
> }
>
> So how should I convince qooxdoo not to do that?
>
> rgds,kris
>
> On 9.6.2008, at 17:01, thron7 wrote:
>
>> Kris,
>>
>> that's pretty much for an excerpt, isn't it ;). There are a couple of
>> things I don't quite understand, but particularly I'm missing the
>> point
>> where you are trying to set the background color of the inline div.
>> Wasn't that what your question was about?! Could you come up with a
>> minimized code sample that shows the problem?
>>
>> Thomas
>>
>>
>>
>> Kristjan Cočev wrote:
>>> ok, here the excerpt of the code:
>>>
>>> <script type="text/javascript">
>>> qxsettings = new Object();
>>> qxsettings["qx.enableApplicationLayout"] = false;
>>> qxsettings["qx.boxModelCorrection"] = true;
>>> //qxsettings = { "qx.enableApplicationLayout" : "false" };
>>> </script>
>>> <!-- Include compiled qooxdoo -->
>>> <script type="text/javascript"
>>> src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/
>>> script/qx.js") %>"></script>
>>> <!-- Add your own classes here -->
>>> <div id="description">
>>> <p>Inline widget.</p><p>Application layout is disabled by using
>>> qx.core.Settings. Scrollbars appear, if the content is bigger than
>>> the window.</p>
>>> </div>
>>>
>>> <div id="iframe1" class="manualFrame"
>>> style="overflow:hidden;position:static;margin-top:38px;margin-left:
>>> 10px">
>>> Inline Frame #1
>>> </div>
>>>
>>> <div id="iframe2" class="manualFrame"
>>> style="overflow:hidden;position:static;margin-top:20px;margin-left:
>>> 10px">
>>> Inline Frame #2
>>> </div>
>>>
>>> <script type="text/javascript">
>>> qx.Class.define("BasicSample",
>>> {
>>> extend : qx.application.Gui,
>>>
>>> members :
>>> {
>>> main : function()
>>> {
>>> this.base(arguments);
>>> var d = qx.ui.core.ClientDocument.getInstance();
>>>
>>> var inlineWidget = new qx.ui.basic.Inline("iframe1");
>>>
>>> inlineWidget.setHeight("auto");
>>> inlineWidget.setWidth("auto");
>>>
>>> var fieldSet = new qx.ui.groupbox.GroupBox("My first inline
>>> fieldset");
>>>
>>> with(fieldSet)
>>> {
>>> setLeft(0);
>>> setRight(0);
>>>
>>> setHeight("auto");
>>> };
>>>
>>> inlineWidget.add(fieldSet);
>>>
>>> d.add(inlineWidget);
>>>
>>>
>>>
>>> var atom1 = new qx.ui.basic.Atom("Name");
>>> var textfield1 = new qx.ui.form.TextField;
>>>
>>> with(atom1)
>>> {
>>> setLeft(0);
>>> setTop(3);
>>> };
>>>
>>> with(textfield1)
>>> {
>>> setLeft(80);
>>> setRight(0);
>>> setTop(0);
>>> };
>>>
>>> fieldSet.add(atom1, textfield1);
>>>
>>>
>>>
>>> var atom2 = new qx.ui.basic.Atom("First Name");
>>> var textfield2 = new qx.ui.form.TextField;
>>>
>>> with(atom2)
>>> {
>>> setLeft(0);
>>> setTop(33);
>>> };
>>>
>>> with(textfield2)
>>> {
>>> setLeft(80);
>>> setRight(0);
>>> setTop(30);
>>> };
>>>
>>> fieldSet.add(atom2, textfield2);
>>>
>>>
>>>
>>> var atom3 = new qx.ui.basic.Atom("City");
>>> var textfield3 = new qx.ui.form.TextField;
>>>
>>> with(atom3)
>>> {
>>> setLeft(0);
>>> setTop(63);
>>> };
>>>
>>> with(textfield3)
>>> {
>>> setLeft(80);
>>> setRight(0);
>>> setTop(60);
>>> };
>>>
>>> fieldSet.add(atom3, textfield3);
>>>
>>>
>>>
>>> /*
>>> Menu
>>> */
>>>
>>> var m1 = new qx.ui.menu.Menu;
>>>
>>> var mb1_01 = new qx.ui.menu.Button("New");
>>> var mb1_02 = new qx.ui.menu.Button("Open");
>>> var mb1_03 = new qx.ui.menu.Button("Save");
>>> var mb1_04 = new qx.ui.menu.Button("Save as");
>>> var mb1_05 = new qx.ui.menu.Button("Close");
>>> var mb1_06 = new qx.ui.menu.Button("Restore last saved");
>>>
>>> m1.add(mb1_01, mb1_02, mb1_03, mb1_04, mb1_05, mb1_06);
>>>
>>>
>>> var m2 = new qx.ui.menu.Menu;
>>>
>>> var mb2_01 = new qx.ui.menu.Button("Undo");
>>> var mb2_02 = new qx.ui.menu.Button("Redo");
>>> var mb2_b1 = new qx.ui.menu.Separator();
>>> var mb2_03 = new qx.ui.menu.Button("Cut", "icon/16/
>>> actions/
>>> edit-cut.png");
>>> var mb2_04 = new qx.ui.menu.Button("Copy", "icon/16/
>>> actions/edit-copy.png");
>>> var mb2_05 = new qx.ui.menu.Button("Paste", "icon/16/
>>> actions/edit-paste.png");
>>> var mb2_06 = new qx.ui.menu.Button("Delete", "icon/16/
>>> actions/edit-delete.png");
>>> var mb2_b2 = new qx.ui.menu.Separator();
>>> var mb2_07 = new qx.ui.menu.Button("Select All");
>>> var mb2_08 = new qx.ui.menu.Button("Find");
>>> var mb2_09 = new qx.ui.menu.Button("Find Again");
>>>
>>>
>>>
>>>
>>> mb2_05.setEnabled(false);
>>> mb2_06.setEnabled(false);
>>> mb2_09.setEnabled(false);
>>>
>>> m2.add(mb2_01, mb2_02, mb2_b1, mb2_03, mb2_04, mb2_05,
>>> mb2_06, mb2_b2, mb2_07, mb2_08, mb2_09);
>>>
>>>
>>> var m3 = new qx.ui.menu.Menu;
>>> var m3_suba = new qx.ui.menu.Menu;
>>> var m3_subb = new qx.ui.menu.Menu;
>>> var m3_subc = new qx.ui.menu.Menu;
>>>
>>> var mb3_01 = new qx.ui.menu.CheckBox("File List", null,
>>> false);
>>> var mb3_02 = new qx.ui.menu.CheckBox("Syntax
>>> Highlighting", null, true);
>>> var mb3_03 = new qx.ui.menu.CheckBox("Statusbar", null,
>>> true);
>>> var mb3_b1 = new qx.ui.menu.Separator();
>>> var mb3_04 = new qx.ui.menu.Button("Printer Font", null,
>>> null, m3_suba);
>>> var mb3_05 = new qx.ui.menu.Button("Editor Font", null,
>>> null, m3_subb);
>>> var mb3_06 = new qx.ui.menu.Button("Export Font", null,
>>> null, m3_subc);
>>>
>>> m3.add(mb3_01, mb3_02, mb3_03, mb3_b1, mb3_04, mb3_05,
>>> mb3_06);
>>>
>>> var mb3_suba_01 = new qx.ui.menu.Button("Tahoma, 11pt");
>>> var mb3_suba_02 = new qx.ui.menu.Button("Tahoma, 12pt");
>>> var mb3_suba_03 = new qx.ui.menu.Button("Tahoma, 13pt");
>>> var mb3_suba_04 = new qx.ui.menu.Button("Tahoma, 14pt");
>>> var mb3_suba_05 = new qx.ui.menu.Button("Tahoma, 15pt");
>>>
>>> m3_suba.add(mb3_suba_01, mb3_suba_02, mb3_suba_03,
>>> mb3_suba_04, mb3_suba_05);
>>>
>>> var mb3_subb_01 = new qx.ui.menu.Button("Verdana, 11pt");
>>> var mb3_subb_02 = new qx.ui.menu.Button("Verdana, 12pt");
>>> var mb3_subb_03 = new qx.ui.menu.Button("Verdana, 13pt");
>>> var mb3_subb_04 = new qx.ui.menu.Button("Verdana, 14pt");
>>> var mb3_subb_05 = new qx.ui.menu.Button("Verdana, 15pt");
>>>
>>> m3_subb.add(mb3_subb_01, mb3_subb_02, mb3_subb_03,
>>> mb3_subb_04, mb3_subb_05);
>>>
>>> var mb3_subc_01 = new qx.ui.menu.Button("Courier, 11pt");
>>> var mb3_subc_02 = new qx.ui.menu.Button("Courier, 12pt");
>>> var mb3_subc_03 = new qx.ui.menu.Button("Courier, 13pt");
>>> var mb3_subc_04 = new qx.ui.menu.Button("Courier, 14pt");
>>> var mb3_subc_05 = new qx.ui.menu.Button("Courier, 15pt");
>>>
>>> m3_subc.add(mb3_subc_01, mb3_subc_02, mb3_subc_03,
>>> mb3_subc_04, mb3_subc_05);
>>>
>>>
>>>
>>> var m4 = new qx.ui.menu.Menu;
>>>
>>> var m4_suba = new qx.ui.menu.Menu;
>>>
>>> var mb4_01 = new qx.ui.menu.Button("View", null, null,
>>> m4_suba);
>>> var mb4_b1 = new qx.ui.menu.Separator();
>>> var mb4_02 = new qx.ui.menu.Button("Editor
>>> Preferences...");
>>> var mb4_03 = new qx.ui.menu.Button("Editor Extensions");
>>> var mb4_04 = new qx.ui.menu.Button("Framework
>>> Preferences");
>>>
>>> m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04);
>>>
>>> var mb4_suba_01 = new qx.ui.menu.Button("New Window");
>>> var mb4_suba_b1 = new qx.ui.menu.Separator();
>>> var mb4_suba_02 = new qx.ui.menu.RadioButton
>>> ("Overlapping", null, true);
>>> var mb4_suba_03 = new qx.ui.menu.RadioButton("Split
>>> Horizontally", null);
>>> var mb4_suba_04 = new qx.ui.menu.RadioButton("Split
>>> Vertically", null);
>>> var mb4_suba_b2 = new qx.ui.menu.Separator();
>>> var mb4_suba_05 = new qx.ui.menu.Button("Next Window");
>>> var mb4_suba_06 = new qx.ui.menu.Button("Previous
>>> Window");
>>>
>>> m4_suba.add(mb4_suba_01, mb4_suba_b1, mb4_suba_02,
>>> mb4_suba_03, mb4_suba_04, mb4_suba_b2, mb4_suba_05, mb4_suba_06);
>>>
>>> var mb4_manager = new qx.ui.selection.RadioManager
>>> ("windowMode", [ mb4_suba_02, mb4_suba_03, mb4_suba_04 ]);
>>>
>>>
>>> var m5 = new qx.ui.menu.Menu;
>>>
>>> var mb5_01 = new qx.ui.menu.Button("Help");
>>> var mb5_02 = new qx.ui.menu.Button("About");
>>>
>>> m5.add(mb5_01, mb5_02);
>>>
>>> d.add(m1, m2, m3, m3_suba, m3_subb, m3_subc, m4, m4_suba,
>>> m5);
>>>
>>>
>>> var inline2 = new qx.ui.basic.Inline("iframe2");
>>>
>>> inline2.setHeight("auto");
>>> inline2.setWidth("auto");
>>>
>>>
>>> var mb1 = new qx.ui.toolbar.ToolBar;
>>>
>>> var mbb1 = new qx.ui.toolbar.MenuButton("File", m1);
>>> var mbb2 = new qx.ui.toolbar.MenuButton("Edit", m2);
>>> var mbb3 = new qx.ui.toolbar.MenuButton("View", m3);
>>> var mbb4 = new qx.ui.toolbar.MenuButton("Options", m4);
>>> var mbb5 = new qx.ui.toolbar.MenuButton("Help", m5);
>>>
>>> mb1.add(mbb1, mbb2, mbb3, mbb4, mbb5);
>>>
>>> with(mb1)
>>> {
>>> setWidth(400);
>>> setHeight("auto");
>>> };
>>>
>>> inline2.add(mb1);
>>>
>>> d.add(inline2);
>>> }
>>> }
>>> });
>>>
>>> qx.core.Init.getInstance().setApplication(new BasicSample);
>>> </script>
>>>
>>>
>>> On 9.6.2008, at 14:30, thron7 wrote:
>>>
>>>
>>>> Kris,
>>>>
>>>> could you provide some essential code here so we can see what you've
>>>> done so far?!
>>>>
>>>> Thomas
>>>>
>>>>
>>>> Kristjan Cočev wrote:
>>>>
>>>>> Hi, just started using qooxdoo.
>>>>> Have one question regarding the inline widget:
>>>>>
>>>>> how do I avoid setting the backroung color to the default "gray"
>>>>> setting?
>>>>>
>>>>> I want to use the qooxdoo toolkit in a portlet container and have
>>>>> tried the inline widget thingy, but it sets the background color of
>>>>> the whole page instead of just the containing <div> container.
>>>>>
>>>>> What is the best way to achieve this?
>>>>>
>>>>> Best regards,
>>>>> Kris
>>>>>
>>>>> -------------------------------------------------------------------
>>>>> --
>>>>> ----
>>>>> Check out the new SourceForge.net Marketplace.
>>>>> It's the best place to buy or sell services for
>>>>> just about anything Open Source.
>>>>> http://sourceforge.net/services/buy/index.php
>>>>> _______________________________________________
>>>>> qooxdoo-devel mailing list
>>>>> [email protected]
>>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>>
>>>>>
>>>>>
>>>>>
>>>> --------------------------------------------------------------------
>>>> --
>>>> ---
>>>> Check out the new SourceForge.net Marketplace.
>>>> It's the best place to buy or sell services for
>>>> just about anything Open Source.
>>>> http://sourceforge.net/services/buy/index.php
>>>> _______________________________________________
>>>> qooxdoo-devel mailing list
>>>> [email protected]
>>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>>
>>>
>>> ---------------------------------------------------------------------
>>> ----
>>> Check out the new SourceForge.net Marketplace.
>>> It's the best place to buy or sell services for
>>> just about anything Open Source.
>>> http://sourceforge.net/services/buy/index.php
>>> _______________________________________________
>>> qooxdoo-devel mailing list
>>> [email protected]
>>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>>
>>
>> ----------------------------------------------------------------------
>> ---
>> Check out the new SourceForge.net Marketplace.
>> It's the best place to buy or sell services for
>> just about anything Open Source.
>> http://sourceforge.net/services/buy/index.php
>> _______________________________________________
>> qooxdoo-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
> -------------------------------------------------------------------------
> Check out the new SourceForge.net Marketplace.
> It's the best place to buy or sell services for
> just about anything Open Source.
> http://sourceforge.net/services/buy/index.php
> _______________________________________________
> qooxdoo-devel mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
-------------------------------------------------------------------------
Check out the new SourceForge.net Marketplace.
It's the best place to buy or sell services for
just about anything Open Source.
http://sourceforge.net/services/buy/index.php
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
