[2.0][CLOSED] alignment issues

[petchia]

I have noticed an alignment issue when using multiple ExtJS components. Basically, the issue is that the components are not explicitly defining their alignment so they are inheriting the default page alignment.

For example, say I have my default page alignment set to "center". Things such as ExtJS dialog titles will inherit that alignment and be centered instead of left-aligned (which I believe is intended to be the default for dialog titles). Similarly, grids are effected by the default page alignment in the columns menu. The column names and checkboxes are all out of whack if you have the page alignment set to "center".

The reason I point this out is because it seems that ExtJS explicitly defines its CSS styling properties for most things, but not for alignment. In my opinion the alignment should be explicitly defined by ExtJS and not be subject to what the default page alignment is.

Thoughts?

[prophet]

What do you mean by default page alignment? Like this?

html, body {

text-align: center;

}

Post a screen shot / give code. Don't know what the problem is exactly...

[petchia]

Yes, you are correct. The following default alignment breaks ExtJS

html, body {
text-align: center;
}

I have attached a screenshot of how this impacts grids. Grids aren't the only thing affected by this. Dialog windows are too.

[tryanDLS]

I would think that even if we added a default text-align to ext-all.css (reset.css), it would be left, not center. It's never a good idea to set text-align:center as the default for a document, b/c most text should be displayed left aligned. Center should only be used for specific items that require a different alignment.

[petchia]

Right. I am not advocating that ExtJS set a default text-align to center. I am advocating that ExtJS have a default text-align of left so that ExtJS is not affected by whatever the default text-align is for a page. Does that make sense? Basically, I don't think ExtJS should inherit the text-align of the page and right now it is in some scenarios. That is the flaw.

I would think that even if we added a default text-align to ext-all.css (reset.css), it would be left, not center. It's never a good idea to set text-align:center as the default for a document, b/c most text should be displayed left aligned. Center should only be used for specific items that require a different alignment.

[raccardi]

Is this going anywhere? I too have found it inconvenient how a containing element's alignment is inherited by any Ext components within. And it's not just in cases where people overzealously set BODY { text-align: center;}; it might just be that you want to have a panel centered on the page and so you put it inside a <div> with text-align: center.
To get around this, I had to wrap my panel in a table like so:

<table align=center>
<tr>
<td>
    <div id='filter' style='margin-bottom: 10px;' ></div> 
    <div id='gridDiv'></div>
</td>
</tr>
</table>

it doesn't even seem valid, but it's the only thing I've found that does the job

[Condor]

Yes, Ext JS assumes some CSS defaults, like text-align:left and font-size:13px.

You need to restore the default style in the Ext JS component when you override the defaults with your own styling, e.g.

var grid = new Ext.grid.GridPanel({
  ...
  style: 'text-align:left;'
});

ps. You should read 'How do I center an element horizontally with CSS'.

[raccardi]

ps. You should read 'How do I center an element horizontally with CSS'.

Thank you, Condor. I will check that out! I ran countless searches trying to find something addressing the issue, but I guess I never used the right search terms!