:: Forum >> Version 2 >>

AW2.5.3 - Tab align right in Firefox broken?

Hi. Is there a new solution to right align tabs for Firefox in 2.5.3?
The tabs are not visible in any version of Firefox (1.5,2,3 tested).

<style

#myTabs 
    
width100%; 


#myTabs .aw-list-template 
    
positionabsolute
    
right0px
    
padding-right4px
    
text-alignright


#myTabs .aw-item-template 
    
floatnone


</
style
<
script

    var 
obj = new AW.UI.Tabs
    
obj.setId("myTabs"); 
    
obj.setItemText(["Item1""Item2""Item3"]); 
    
obj.setItemCount(3); 
    
obj.setSelectedItems([0]); 
    
document.write(obj); 

</
script
<
div id=myTabs>
<
div style="border-top:1px solid #ccc"></div
 
The previous solution no longer works for Firefox (1.5-3) but work fine in IE, Safari, Opera, Chrome.

Previously posted solutions
/javascript.forum.19296.4/tabs-alignment.html
/javascript.forum.16255.2/tabs-align-right.html
Nate
Monday, November 10, 2008
Is there a followup to this?
Nate
Monday, November 17, 2008
Isn't just one of this two lines missed ?

.aw-system-control {position: absolute}
#myTabs {width: 100%;}

Just tested with your code and first link in FF2.0.011 & 3.0.0 and seems to 'appear' ( did not test the second link)
HTH
Carlos
Monday, November 17, 2008
Uuuppsss
second style line should read:
#myTabs { position: absolute}
Monday, November 17, 2008
Thank you for your help Carlos. Unforunately the issue persists.

Complete code more or less exactly what is listed in the examples-tabs with the previous solution for right alignment
<html>
<
head>
<
link href="./ActiveWidgets/runtime/styles/vista/aw.css" rel="stylesheet" type="text/css" ></link>
<
script src="./ActiveWidgets/runtime/lib/aw.js"></script>
</
head>
<
style>  

.
aw-quirks * {
    
box-sizingborder-box;
    -
moz-box-sizingborder-box;
    -
webkit-box-sizingborder-box;
}

#myTabs {width100%}

/* align tabs modified code from previous sources */ 

#myTabs .aw-list-template {  
    
positionabsolute;  
    
right0px;  
    
padding-right4px;  
    
text-alignright;  
}  

#myTabs .aw-item-template {  
    
floatnone;  
}  

</
style
<
body>
 
<
span id="myTabs"></span>
<
div id="myContent" style="border: 1px solid #aaa; height: 200px; padding: 10px">
    <
div id="div1" style="display:none">Page 1, empty.</div>
    <
div id="div2" style="display:none">Page 2still not much text here...</div>
    <
div id="div3" style="display:none">Page 3the last one.</div>
</
div>
<
script>  

var 
names = ["Start""Another page""The last page"];
var 
values = ["div1""div2""div3"];

var 
tabs = new AW.UI.Tabs;
tabs.setId("myTabs");
tabs.setItemText(names);
tabs.setItemValue(values); // store ids of content DIVs
tabs.setItemCount(3);
tabs.refresh();

tabs.setSelectedItems([0]);
</
script>  
</
body>
</
html>
 
Images detailing the exact situation including working browsers and the failing FF symptoms. Also included is the two line solution posted here.
http://img227.imageshack.us/my.php?image=activewidgetsrighttabvp4.png
Nate
Monday, November 17, 2008
I see it now,
I think vista theme style needs a small fix, cause aqua and system themes are not suffering it.
Sorry not that css proficient ( or not using the right tools) to make this correction in an affordable time.
Carlos
Tuesday, November 18, 2008
Hi Carlos. Thank you for your help.

Are we using the same version?
My aqua and system (which looks like vista theme) are suffering the same issue mentioned above. I've tested the rest of the styles and have this same issue. The left aligned tabs work beautifully without issues.

Alex, any ideas?
Nate
Tuesday, November 18, 2008
Hi Nate,
I am currently testing over AW 2.5.3 trial Version.

If I add position : absolute to the line :
#myTabs {width: 100%}
Then the first issue ( the one with red square ) does not happen to me any more.
And by using a different aw.css file (xp,system or even xp) the alignment issue is gone too :

For the last one I've been trying a while with the styles:
.aw-vista .aw-ui-tabs .aw-items-selected { ...
.aw-vista .aw-ui-tabs .aw-items-selected .aw-item-box {....

but no luck at all.
Hope the right align tabs described in those posts will be fully compatible with vista theme, and also hope I have given some clarity over something ;-)

Thank you




Carlos
Tuesday, November 18, 2008
The problem is that there is a Vista style that does this -
.aw-flow-horizontal .aw-list-template   {width:9999px}
 
so FireFox is actually interpreting this correctly (there are 3 spans in the overall tab. This is done in the inner one).

I fixed this by doing this -
#myTabs         {width:95%; position:absolute}
#myTabs .aw-item-template       {float:right}
.
aw-flow-horizontal .aw-list-template   {width:100%}
...
<
script>
        var     
tabs    = new AW.UI.Tabs
        
var     obj     = new AW.HTML.DIV
        
var     names   = [$TABTEXT]
        var     
values  = ["div1""div2", ...]

        
tabs.setId("myTabs")
        
tabs.setItemText(names)
        
tabs.setItemValue(values)
        
tabs.setItemCount($CNT)

        
tabs.setSelectedItems([0])
        
document.write(tabs)
        
obj.setStyle("border-top""1px solid #999")
        
document.write(obj)
</
script>
 
(disregard the $Variable. I'm generating from a CGI shell script.)

There are still two problems. The DIV line appears above the tabs and the tab labels start from the right (you could just reverse the label array if you want to fix that).

I had it working with the labels showing the right way round yesterday but I've been trying to fix the DIV line position and forgot the CSS values I used then.

Anyway, I hope this helps.
Anthony
Monday, November 24, 2008



This topic is archived.

Back to support forum

Forum search