PDA

View Full Version : Form / Tab / CSS display issue



completej
10 Oct 2009, 12:22 PM
(first post, go easy )

I am seeing a display issue with the Tabs using IE8. I also see this in FF3.5.3, but it is not my native browser so I am somewhat unsure what I need to do when using firebug to possibly solve this problem. My search skills seem to be failing me, so I'm looking for some assistance as to where I can look to solve this issue.

Activating tabs works properly (edit: hovering works properly as well), and the image looks as it should when you switch. However, the tab you toggle from then inherits the display problem.

Has anyone run into this before? If so, how were you able to fix it? I figure it to be some sort of css problem with the sprites.png associated, but I'm not having any luck with simple adjustments I make (like modifying the location of the tab image from the sprite, repeat setting, etc). When I include xtheme-slate.css, the new theme also displays the same problem.

Any help is appreciated, and if anyone sees any other glaring errors or something done improperly or wrong, please call me out on it, thanks,

Image of the problem:

http://www.teamvertex.net/images/tabpanel.png

Head of the site:



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- css for extjs -->
<link type="text/css" rel="stylesheet" href="extjs/resources/css/ext-all.css" />
<link type="text/css" rel="stylesheet" href="extjs/examples/shared/examples.css" />
<link type="text/css" rel="stylesheet" href="extjs/examples/simple-widgets/qtips.css" />
<link type="text/css" rel="stylesheet" href="extjs/examples/ux/css/fileuploadfield.css"/>
<link type="text/css" rel="stylesheet" href="extjs/examples/grid/grid-examples.css"/>
<!-- other css files -->
<link type='text/css' rel='stylesheet' href='css/redmond/datepicker.css' media='print, projection, screen' /><!-- only still used for rmwo -->
<link type='text/css' rel='stylesheet' href='vacation.css' media='print, projection, screen' />
<!--<link type='text/css' rel='stylesheet' href='css/xtheme-slate.css' media='print, projection, screen' />-->
<style type="text/css">
.x-form-radio-group .x-panel-body
{
background: transparent; border:0;
}
.upload-icon
{
background: url('img/image_add.png') no-repeat 0 0 !important;
}
#fi-button-msg
{
border: 2px solid #ccc;
padding: 5px 10px;
background: #eee;
margin: 5px;
float: left;
}
.x-grid3-row-over .x-grid3-cell-inner
{
font-weight: normal;
}
button.step_search
{
background-image: url(img/icons/page_find.png);
background-repeat: no-repeat;
}


</style>
</head>


JS for the Form here (extraneous tabs removed to shorten code):


// tab container
var rmwo_tabs = new Ext.TabPanel({
deferredRender: false
, id: 'rmwo_tab_container'
, defaults: {
height: 420
}
, items: [
rmwo_panel_damage
, rmwo_panel_location
, rmwo_panel_cable
, rmwo_panel_cable
, rmwo_panel_conduit
, rmwo_panel_files
]
});


An example of one of the five tabs (all similar, copied down initially while only changing the items and IDs


// damage info
var rmwo_panel_damage = new Ext.Panel({
title: 'Damage Information'
, id: 'rmwo_tab_damage'
, layout: 'column'
, defaults: {
columnWidth: 0.33
, layout: 'form'
, border: false
, bodyStyle: 'padding:4px'
, autoHeight: true
, anchor: '100%'
}
, items: [{
id: 'rmwo_dmg_col1',
items: [tRepairType, tTDRSent, tDamageClaim]
}, {
id: 'rmwo_dmg_col2',
items: [tAccidentTech, tAccidentDate, tLocateRequest, tLocateCorrect, tLocateAddress, tPhoenixNotify]
}, {
id: 'rmwo_dmg_col3',
items: [tAccidentTime, tRepairTime, tPictures, tLocateNumber, tClerk, tPhoenixPhone, tPhoenixRadio]
}]
});


And the actual form panel


var oRMWO = new Ext.FormPanel({
id: 'oRMWO'
, labelAlign: 'top'
, bodyStyle: 'padding:5px 5px 0; border:0;'
, buttonAlign: 'center'
, defaults: {
anchor: '100%'
}
, stateful: false
, forceLayout: true
, tbar: [
'<span id="rmwo_ticket_span" style="font-weight:bold; font-size:16px;">Create a new ticket</span>'
, '->'
, {
text: 'Email'
, iconCls: 'email_ticket'
, listeners: {
scope: this
, click: {
fn: create_RMWOWindow
}
}
}
, rmwo_ticket_edit
, rmwo_ticket_cancel
]
, items: [
rmwo_header
, rmwo_tabs
]
, buttons: [
rmwo_ticket_submit
, {
text: 'Cancel'
, handler: function() {
oRMWOWindow.hide();
}
}
]
});


And then some (very) slightly tweaked css from ext-all.css



/* tabs here */
.x-tab-strip-top .x-tab-right {
background: #fff url(../images/default/tabs/tabs-sprite.gif);
}
.x-tab-strip-top .x-tab-left{
background: #fff url(../images/default/tabs/tabs-sprite.gif);
}
.x-tab-strip-top .x-tab-strip-inner{
background: #fff url(../images/default/tabs/tabs-sprite.gif);
}
/* end bork bork */

completej
12 Oct 2009, 2:11 PM
Bumping in hopes a css / img guru missed this.

completej
19 Oct 2009, 10:55 AM
Bump. Updated / cleaned JS up while trying various other options.

completej
26 Oct 2009, 5:49 AM
Bump, is there possibly something else I am missing with this code? I've removed and re-added the ExtJs core files to no avail.

Animal
26 Oct 2009, 6:19 AM
You know, you haven't actually described your problem.

completej
26 Oct 2009, 6:32 AM
Dangit, must have been in one of the bumps / revision of the code - the image tag and url was deleted. Thanks for the response, and I updated the main post with the image of the problem.

Animal
26 Oct 2009, 7:31 AM
Looks like a CSS problem. Poke it with Firebug and see what's there.

completej
26 Oct 2009, 7:50 AM
I don't have too much experience with Firebug, but that's how I was able to find those css classes for those tabs. Another problem is I've been moved to a laptop for a docking station setup, and they haven't yet confirmed if they will allow Firefox to be installed on this machine (I don't have another to test anymore).

All my development has to be on IE7+ as a standard (...) so I'm stuck with the tools I have for now.
edit: IE8 is also unavailable, as I was able to make changes to jscript code using that debugger, thought not necessarily applicable to the situation at hand.

I was able to modify simple things like the background-color to identify which classes I know I am working with, but no matter what changes I make - I either end up messing with the sprite to the point it doesn't display, or only adjusting the color and not being able to bridge the gap to figure out why the sprite repeats itself.

Another thing I noticed - tab-right appears on the left of the tab, and tab-left appears on the right of the tab. That is, when adjusting the background-color to identify them.

Thanks again for the response,

completej
26 Oct 2009, 7:58 AM
I also realize this sounds a bit of a cry for help, and while I don't want to get in the habit of learning Ext and having someone do the dirty work for me, I feel like I've got my back against the wall with this situation where I'm unable to correctly troubleshoot the issue for an appropriate fix. My apologies. :s

Due mostly in part to your responses in other threads, I've been able to fix just about every problem I've run into with Ext. Thanks for that.

Animal
26 Oct 2009, 8:36 AM
Not "allow" FF? "ALLOW"?

What kind of sheer idiocy is that?

Well, if they WANT undebuggable systems, then they have one!

completej
26 Oct 2009, 9:30 AM
While I agree, it's a company policy that all workstations use IE as the standard. I'm not in the IT department, so I have no say in the matter.

I would normally set all the info up in my personal SQLEXPRESS account, had it not been waxed with the new laptop. So right now, I'm between a rock and a hard place as I continue on the work I had started prior to my new equipment.

Any thoughts on what I could attempt to try in a guess and check method to work this issue out? Thanks,

aw1zard2
26 Oct 2009, 9:41 AM
Have you asked the IT department if you can use FF for debugging of issues with the website to be w3c complaint? In places I've worked at I say this to get FF installed. Most IT departments don't want you to go higher over their heads and raise the question of why you can't use the application to be w3c complaint. I've been doing contract work and sometimes you gotta give a little push to get what you need to get things done.

:)

completej
26 Oct 2009, 9:45 AM
Yes, we have a ticketing system and all necessary requests have been made. It's a bit silly, but they actually block firefox via executable file - even PortableApps are disallowed.

But I digress - I'd like to brainstorm for ideas on what I could blindly attempt for the issue at hand. It's tough to say if they will respond positively to my request or deny it, and I would still like to correct this issue.

aw1zard2
26 Oct 2009, 10:05 AM
.x-tab-strip-top .x-tab-right, .x-tab-strip-top .x-tab-left, .x-tab-strip-top .x-tab-strip-inner{
background-image: url(../images/default/tabs/tabs-sprite.gif);
}

.x-tab-strip-bottom .x-tab-right {
background-image: url(../images/default/tabs/tab-btm-inactive-right-bg.gif);
}

.x-tab-strip-bottom .x-tab-left {
background-image: url(../images/default/tabs/tab-btm-inactive-left-bg.gif);
}

.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
background-image: url(../images/default/tabs/tab-btm-right-bg.gif);
}

.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
background-image: url(../images/default/tabs/tab-btm-left-bg.gif);
}
Try using these defaults and see if it shows up correctly. From looking at your custom CSS your using the wrong image for the inactive tabs. I bet when you click one of the messed up tabs it shows correctly like the first one in your picture. :)

completej
26 Oct 2009, 10:29 AM
I had not made any changes to the .x-tab-strip-bottom classes. The only change I made was separating out:



.x-tab-strip-top.x-tab-right, .x-tab-strip-top.x-tab-left, .x-tab-strip-top.x-tab-strip-inner{
background-image: url(../images/default/tabs/tabs-sprite.gif);
}


and changing it to:



.x-tab-strip-top.x-tab-right {
background: #fff url(../images/default/tabs/tabs-sprite.gif);
}
.x-tab-strip-top.x-tab-left{
background: #fff url(../images/default/tabs/tabs-sprite.gif);
}
.x-tab-strip-top.x-tab-strip-inner{
background: #fff url(../images/default/tabs/tabs-sprite.gif);
}


To allow me to change the background color a bit quicker, without adding an additional line. This was in ext-all.css, not an override; possibly a problem, not sure though. I have since taken the habit of overriding all classes like they should be in the main page.

I was under the impression the above code are similar declarations, but I could be missing a larger difference that I don't understand.

When I replace what I have with your suggestion, the tabs show up as the following:

http://www.teamvertex.net/images/new_tabs.PNG

as if the sprite didn't exist. Tracing back to the folder where the sprites exist, I do find the file there.

\extjs\resources\images\default\tabs

If I go back to an extracted ext-3.0.0 folder where no modifcations have been made and drop back ext-all.css, it goes back to the above

Edit: and yes, clicking, like hovering, also functions normally and the active tab's sprite shows correctly.

aw1zard2
26 Oct 2009, 10:50 AM
Just wondering if you look at the tabs example from ext3 it shows up correctly? I would remove extra css files 1 by 1 to "step thru" the issues. I'd also try and just make the tabs a separate example and see if it does it there as well.

My brain doesn't want to work too well today being sick.

completej
26 Oct 2009, 11:06 AM
That's what's driving me mad. The examples of tabs display just fine. The only difference is the included tabs-example.css file. Inside that:



.list li{padding:2px;font-size:8pt;}
pre {
font-size:11px;
}
.x-tab-panel-body .x-panel-body {
padding:10px;
}
/* default loading indicator for ajax calls */
.loading-indicator {
font-size:8pt;
background-image:url('../../resources/images/default/grid/loading.gif');
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}
.new-tab {
background-image:url(../feed-viewer/images/new_tab.gif) !important;
}

.tabs {
background-image:url( ../desktop/images/tabs.gif ) !important;
}

Which don't seem to relate to the problem at hand. I'm not sure what other .css files I could remove that directly affect the classes used to render the tab.

I'm going to try and create a separate stand-alone site using my files and then just using core extjs to see if there is something I can compare, but I've already slimmed up linked css files to the point of me scratching my head.

Thanks for the feedback,

edit: after removing all other attached .css files and only including:



<link type="text/css" rel="stylesheet" href="extjs/resources/css/ext-all.css"/>


the problem (where the tab images simply do not load, not like the original "overlap" of inactive tab sprites) still exists. This is also using the ext-all.css file straight from a brand new downloaded .zip from the site as of about 10 minutes ago.

aw1zard2
26 Oct 2009, 11:16 AM
I would look at all the tabs.css.

In the resources/css directory you have both structure and visual. Combine these into 1 file and do a few edits to see if you can get the correct look you want.

But as a control test just put the one combined file after your css changes to make sure it looks normal.

Also have you looked at using IE's developer toolbar it's not as good as firebug but its better then nothing. :)

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038

completej
26 Oct 2009, 11:19 AM
I had forgotten to mention that, good catch. I replaced \visual\tabs.css, as well as \structure\tabs.css with new .css files to no avail.

About the IE dev toolbar - that's IE8 only, correct? Where I once had that ability, unfortunately now I do not. I'm literally locked in IE7 indefinitely until the IT department decides to allow devs to use the tools they need to get the job done (it's a larger issue than simply debugging jscript and css issues, and a completely different can of worms).

edit: checked the link, as long as it doesn't hit the registry, I may be able to install it, but I've run into problems before on locked workstations and installing addons of any kind. Will give it a try here in a bit, thanks for the heads up.

aw1zard2
26 Oct 2009, 11:21 AM
It came out in 2007 so IE 7. That link for the plugin only works for IE 7 as IE 8 has a better version of it.