:: Forum >> Version 2 >>

Tabs Alignment

Anyone know a way to get the following code to make the tabs start at the given point and build left instead of right? I've tried to right align with things like text-align but it doesn't seem to work. Any Ideas?

I know I could just adjust the left starting point and then adjust the width but it would be great to be able to just set a starting point and go from there instead of having to adjust every time I add a new tab.

<HTML>
<
HEAD>
  <
LINK href="/ActiveWidgets/runtime/styles/aqua/aw.css" rel="stylesheet"></LINK>
  <
SCRIPT src="/ActiveWidgets/runtime/lib/aw.js"></script>
  <
STYLE>
    .
aw-system-control {positionabsolute}

    
#box   {  left:   0pxtop:  0pxwidth800pxheight400pxborder1px solid #999background#ece9d8positionabsolute;}
    
#frame {  left:  10pxtop90pxwidth780pxheight300pxborder1px solid #999background#f9f8f4positionabsolute;}
    
#tabs  {  left780pxtop70pxheight:  20pxpositionabsolute; }
  </
STYLE>
</
HEAD>
<
BODY>
  <
SCRIPT>
    var 
box = new AW.HTML.DIV;                                                                                    
    
box.setId("box");                                                                                             
    
document.write(box);                                                                                          
                                                                                                                  
    var 
frame = new AW.HTML.DIV;                                                                                  
    
frame.setId("frame");                                                                                         
    
document.write(frame); 

    var 
tab_names = [
      
"Tab1",
      
"Tab2",
      
"Tab3",
      
"Tab4",
      
"Tab5",
      
"Tab6",
      
"Tab7",
    ];
    var 
tabs = new AW.UI.Tabs;
    
tabs.setId("tabs");
    
tabs.setItemText(tab_names);
    
tabs.setItemCount(7);
    
tabs.setSelectedItems([1]);
    
document.write(tabs);
  </
script>
</
BODY>
</
HTML
Monday, April 16, 2007
Aligning tabs to the right -

.aw-system-control {positionabsolute}

#box   {  left:   0pxtop:  0pxwidth800pxheight400pxborder1px solid #999background#ece9d8positionabsolute;}
#frame {  left:  10pxtop90pxwidth780pxheight300pxborder1px solid #999background#f9f8f4positionabsolute;}
#tabs  {  left:  10pxtop70pxwidth780pxheight:  20pxpositionabsolute; }

/* align tabs to the right */

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

#tabs .aw-item-template {
    
floatnone;
}
 
Alex (ActiveWidgets)
Monday, April 16, 2007
You...complete...me! <3

Thanks!
Monday, April 16, 2007
Hi gentelmans ,it is not mentioned where to store the pages that each tab will connect to when we click on it ,,,
Tuesday, August 21, 2007
Check the code in /examples/controls - tabs/ folder
Alex (ActiveWidgets)
Tuesday, August 21, 2007



This topic is archived.

Back to support forum

Forum search