PDA

View Full Version : Change padding fieldset



nicobarten
8 Oct 2009, 1:37 AM
Hi all,

I have some fieldsets in my application. But for one fieldset i want the padding to be changed (is default 10px).

How to do this only for this one fieldset and not for the others? I tried the baseCls property, but it seems this also clears all other fieldset css, so it didn't work...

smit_al
8 Oct 2009, 4:17 AM
Have a look at bodyStyle.

API Documentation (http://www.extjs.com/deploy/dev/docs/?class=Ext.form.FieldSet)

nicobarten
8 Oct 2009, 5:07 AM
tried bodyStyle too:



bodyStyle: 'padding: 5px' // 5px instead of 10px


Didn't work... :(

nicobarten
11 Oct 2009, 10:41 PM
nobody?

nicobarten
11 Oct 2009, 11:46 PM
I have now this:



xtype: 'fieldset',
id: 'myfieldset',
title: 'Ingelogd als',
collapsible: false,
height: 95,
width: 243,
items: [
{
border: false,
html: // some html, don't matter for this example
}],
listeners:
{
render: function()
{
var myfieldset = document.getElementById('myfieldset');
myfieldset.style.padding = "5px";
myfieldset.style.paddingLeft = "10px";
}
}


Now this is not a 'perfect' solution, but it works under Firefox and Safari. However, it seems that under IE the padding CSS isn't applied well or isn't applied at all.

So if someone has a better solution (i absolutely need this to work under IE)?

Animal
11 Oct 2009, 11:55 PM
bodyStyle should work.

Animal
11 Oct 2009, 11:59 PM
No, it's just style, not bodyStyle. The padding is applied to the outer element.... Not sure that's a good idea.

I'd use



style: 'padding:0px',
bodyStyle: 'padding:5px',

nicobarten
12 Oct 2009, 12:11 AM
Thank you for your reply.

It worked, however, the IE rendering problem still exists, somehow IE doesn't apply the CSS or doesn't apply it well...

Hope there's a work around for this, because most of the users will be using IE.

Tested it with IE 8.

Edit: I looked in the IE debugger (wow IE has one!) and it seems it does apply the CSS padding... but somehow the rendering is far off.

Animal
12 Oct 2009, 12:15 AM
We developers have to draw a line in the sand at some point. We have to say "Sorry, because IE6 is such a terrible and buggy browser which you insist on continuing to use 10 years after it was released, we cannot make the application look good on it. That's just how it is. Sorry - there are plenty of other options for you to choose from"

Condor
12 Oct 2009, 12:25 AM
Due to limitations in IE you can't specify a padding-top below 10px (a fieldset in IE always has a 10px padding-top and any extra padding should be applied to the body and not to the fieldset).

Try:

style: 'padding: 0 5px 5px 10px',
bodyStyle: 'padding-top: ' + (Ext.isIE ? '0' : '10px'),

nicobarten
12 Oct 2009, 12:33 AM
I found this line in the IE debugger:



<legend class="x-fieldset-header x-unselectable" id="ext-gen99" style="mozuserselect: none; khtmluserselect: none;" unselectable="on">
The margin-bottom style for this element was set on 10px. When i set this in the debugger on 0px, it looks fine.

The line can be found under the:



<fieldset class=" x-fieldset" id="myfieldset" style="padding-bottom: 0px; padding-left: 5px; width: 243px; padding-right: 0px; padding-top: 0px;">
The only thing i now need to know is how to edit the margin-bottom style for the element specified above. Maybe by id (ext-gen99), but will the id always be the same?

@animal: it's IE8 in which i'm currently testing.

nicobarten
12 Oct 2009, 12:39 AM
I tried it with the id:



render: function()
{
document.getElementById('ext-gen99').style.marginBottom = "0px";
}
It works (for all browsers, yeah!), but as i said before, won't this id change as i continue to develop the application? There must be some 'safer' way to change this style or access this element. :-?

Edit: maybe i should just get the first child of:



<fieldset class=" x-fieldset" id="myfieldset" style="padding-bottom: 0px; padding-left: 5px; width: 243px; padding-right: 0px; padding-top: 0px;">


I have the id for this element, and the first and only child is the 'legend'-element which i want to change.

Condor
12 Oct 2009, 1:17 AM
I think you missed my post (http://www.extjs.com/forum/showthread.php?p=396736#post396736).

nicobarten
12 Oct 2009, 2:59 AM
@Condor: I tried it, but that didn't do what i want...

In fact, it made the fieldset also look wrong in Firefox (the distance between the fieldset title and the first item is too big, i want that smaller).

So, when i set your code in this way:



bodyStyle: 'padding-top: ' + (Ext.isIE ? '0' : '0px'),
I set for both IE and Firefox padding-top to 0. This way it looks well in Firefox (to give you a feeling what i'm trying to archieve).

Condor
12 Oct 2009, 3:07 AM
As said, you can set the padding-top to 0 in all browsers except IE.

If you want a uniform display across browsers then you will have to keep padding-top: 10px, because that what it is in IE (and it can't be changed).

nicobarten
12 Oct 2009, 3:16 AM
I tried it with the id:



render: function()
{
document.getElementById('ext-gen99').style.marginBottom = "0px";
}
It works (for all browsers, yeah!), but as i said before, won't this id change as i continue to develop the application? There must be some 'safer' way to change this style or access this element. :-?

Edit: maybe i should just get the first child of:



<fieldset class=" x-fieldset" id="myfieldset" style="padding-bottom: 0px; padding-left: 5px; width: 243px; padding-right: 0px; padding-top: 0px;">
I have the id for this element, and the first and only child is the 'legend'-element which i want to change.

Still i got it working with this:



render: function()
{
// Fix voor IE rendering
document.getElementById('myfieldset').childNodes[0].style.marginBottom = "0px"; }


The childnode is a legend element which marginBottom style normally = "10px".