Absolute Positioning

[FabianFriedl]

version smartgwtpro-4.1

browser: general problem

Hi I am having a question about the generated html / css code.

I am creating a Window Object which is centered in the Page.

This works fine but when i take a look at the generated html Code
it contains tons of inline css code and all children of this window are positioned absolute with top and left properties set.

In the image below you can see an example of this inline css code.

Is there a way to turn off this inline css or at least is there a way to set these properties as defaults ?

Any help is highly appreciated.

Thank You

[Blama]

Hi FabianFriedl,

that's the price you pay for pixel-perfect design. Just kidding.
Did you look at the Quick Start Guide skinning section as well as this docs?
Even though the markup looks messy you don't have to worry as you can modify almost every important number in either load_skin.js or skin_styles.css.
I didn't believe it first as well, but really works. Just make sure to stick to this tip from the QSG:

Now you’re ready to customize the new skin. You can do so by modifying any of the files listed in the preceding table inside your new skin directory. When modifying your custom skin, best practice is to group all changes in skin_styles.css and load_skin.js near the end of the file, so that you can easily apply your customizations to future, improved versions of the original skin.

It will save you a lot of time.
If you want to change something, copy the selector and add your new rule a the end of the file.

Best regards,
Blama

[FabianFriedl]

Hi Blama,
thank you for the quick help.

Yes i've had a look at those two resources - i am trying to get a window styled at the moment but i am having problems because even if i set the top and left properties for the headerDefaults in load_skin.js - those values dont get applied. But other values do like the height property.

Take a look at this code snippet

isc.Window.changeDefaults("headerDefaults", {
top: 10,
left: 10,
height: 24
});

the property 24 gets applied as you can see in the generated code here

<div id="isc_2" eventproxy="isc_Window_0_header" class="windowHeader" style="position: absolute; left: 2px; top: 2px; width: 274px; height: 24px; z-index: 200054; overflow: hidden; cursor: default; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse;" onscroll="return isc_Window_0_header.$lh()">

any help would be really nice

thank you

kind regards