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 {
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.htmlNate
November 10,
Is there a followup to this?
Nate
November 17,
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
November 17,
Uuuppsss
second style line should read:
#myTabs { position: absolute}
November 17,
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%}
#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);
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.pngNate
November 17,
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
November 18,
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
November 18,
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
November 18,
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
November 24,
