PDA

View Full Version : Border-box?



robine
22 Aug 2011, 11:57 PM
The layout in my Ext JS application are all messed up.
It has something to do with the standard CSS styling that comes with Ext JS 4.

It has a styling called border-box and everything looks crooked, but if I change it to content-box, everything looks good EXCEPT the radiobuttons and checkboxes etc.

I am getting kinda desperate. Does anyone has a solution to my problem?

skirtle
23 Aug 2011, 12:56 AM
Which ExtJS version exactly?

Which browser & version exactly? Have you tried others?

What doctype are you using?

robine
23 Aug 2011, 1:34 AM
Thanks for the reply.

The version is Ext JS 4, the browser I use is FireFox (in Chrome it also doesn't look good) and the Doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

skirtle
23 Aug 2011, 1:48 AM
If it fails in multiple browsers that'll make it easier to diagnose.

Please can you give the exact version numbers of both ExtJS and the browsers. 'ExtJS 4' and 'Firefox' doesn't really tie it down I'm afraid.

Which ExtJS stylesheets are you using?

Are you using any advanced ExtJS CSS options (like scoped CSS)?

Do you have any stylesheets other than the standard ExtJS stylesheets that might be messing with standard HTML elements?

Obviously ExtJS does work in FF, so there's got to be something special about your setup.

robine
23 Aug 2011, 2:00 AM
I found the solution on the Sencha forum 2 months ago (it was a JavaScript snippet) and forwarded it to my team members but they didn't notice it and didn't fix the problem.

The solution is now removed from the forum unfortunatly.


I can post screenshot of the problem, I use FireFox 6.0 and the Ext JS version is 4.0.0.

Is it easier with screenshots?

skirtle
23 Aug 2011, 2:09 AM
A screenshot would probably help but to be honest I don't hold up much hope if you're using 4.0.0. Are you in a position to upgrade to the latest version?

robine
23 Aug 2011, 2:18 AM
There was a solution 2 months ago to this problem. Why has it been removed?
It was exactly the problem I am having now. It is something in the Javascript that goes wrong and can be fixed with one simple snippet. At least, that's what the forum post said.

I will post the screenshots this afternoon. Thanks so much in advange!

skirtle
23 Aug 2011, 2:34 AM
There was a solution 2 months ago to this problem. Why has it been removed?

The person who posted it might have deleted it but I doubt it. I'd say it's more likely that you just can't find it.


It is something in the Javascript that goes wrong and can be fixed with one simple snippet.

More than likely this snippet has since been integrated into the library, so upgrading would fix it.

You really need to upgrade from 4.0.0. That version was so buggy. Even if it doesn't fix this problem it'd be worth it to avoid the other bugs. At least give it a quick go before you post your screenshot, upgrading isn't always a nightmare.

robine
23 Aug 2011, 3:20 AM
Thanks, I am upgrading now to Ext JS 4.0.2a.

I will let you know how this goes.

Here's the link, which offcourse I saved, to the solution.
Too bad the post is gone:

http://www.sencha.com/forum/archive/index.php/t-125588.html?

robine
23 Aug 2011, 4:06 AM
Okay, I upgraded to the latest version (Ext JS 4.0.2) but the problem is still there.
It is in the default css file ext-all.css

Here's the problem:

27642

Notice; the element.style is loaded in automaticly by Javascript. As you can see, the box is not aligned.

Here is a screenshot if I change the -moz-box-sizing: content-box

27643

As you can see, the box is now aligned.
Well, change the css you could say.
I did. And it broke all the checkboxes and radiobuttons.

My team and I have been working on this problem for over a week now.

Is it more clearer this way? Thanks so much!

robine
23 Aug 2011, 6:57 AM
No one?

skirtle
23 Aug 2011, 7:44 PM
No one?

Please be patient, you can't expect to get a reply within 3 hours. This is a community forum manned by volunteers. If you need help quickly you can always take out a support subscription with Sencha.

I've tried to reproduce your issue but I couldn't. From your screenshots I couldn't really tell what components you're using, which made it difficult to try to recreate.

Judging by your screenshots I'm not convinced that content-box works either. Looks like you're losing the right border to me.

Could you post the code for a simple test case that demonstrates the problem? Please be sure to wrap all code in code tags (# button in the editor toolbar).

robine
23 Aug 2011, 11:27 PM
My apologize, I thought this is a common problem.

I found this topic:

http://www.sencha.com/forum/showthread.php?138055-ext-all.css-file-breaks-my-web-page

Going to try that solution and will post back here with the results.

skirtle
24 Aug 2011, 12:08 AM
The problem discussed in that thread is quite common. It occurs if you have a non-ExtJS page and you try to inject a little bit of ExtJS into it. By including the Ext CSS file it changes a load of the default page styling and can screw up the rest of the page. The scoped CSS is designed to solve this exact problem.

In short, the problem is that the rest if the page is messed up but ExtJS looks fine. I thought you were having the opposite problem?

robine
24 Aug 2011, 12:12 AM
I just want the Sencha Ext JS part too look good, I can adjust the rest of the page from which the styling is in another stylesheet that I have created myself.

I don't understand any of the css styling applied to Ext JS, so if that part is looking good, then I can simply adjust my stylesheet for the rest of the page and everything will be fine.

My teammembers just walked in, so they can try to edit the Javascript and I can see if it works.

I will let you know as soon as possible.

mberrie
26 Aug 2011, 4:41 AM
Here's the link, which offcourse I saved, to the solution.
Too bad the post is gone:
http://www.sencha.com/forum/archive/index.php/t-125588.html?

Oh man, is this the topic you are looking for?

http://www.sencha.com/forum/showthread.php?125588

robine
29 Aug 2011, 3:48 AM
The Javascript parameter didn't work, so now we are going to try the Ext On Ready solution. Thank you so much for this URL!

I will let you know if it worked :)