AW2.5.3 - Tab align right in Firefox broken? | datagrid, gridview, jquery grid examples, javascript ui

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 { 

    width: 100%; 

} 



#myTabs .aw-list-template { 

    position: absolute; 

    right: 0px; 

    padding-right: 4px; 

    text-align: right; 

} 



#myTabs .aw-item-template { 

    float: none; 

} 



</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
http://www.activewidgets.com/javascript.forum.19296.4/tabs-alignment.html
http://www.activewidgets.com/javascript.forum.16255.2/tabs-align-right.html

Is there a followup to this?

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

Uuuppsss
second style line should read:
#myTabs { position: absolute}

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-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

}



#myTabs {width: 100%}



/* align tabs modified code from previous sources */ 



#myTabs .aw-list-template {  

    position: absolute;  

    right: 0px;  

    padding-right: 4px;  

    text-align: right;  

}  



#myTabs .aw-item-template {  

    float: none;  

}  



</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 2, still not much text here...</div>

    <div id="div3" style="display:none">Page 3, the 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

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.

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?

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

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.

AW2.5.3 - Tab align right in Firefox broken?

Forum search