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 {position: absolute}

    #box   {  left:   0px; top:  0px; width: 800px; height: 400px; border: 1px solid #999; background: #ece9d8; position: absolute;}
    #frame {  left:  10px; top: 90px; width: 780px; height: 300px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
    #tabs  {  left: 780px; top: 70px; height:  20px; position: absolute; }
  </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>

April 16,

Aligning tabs to the right -

.aw-system-control {position: absolute}

#box   {  left:   0px; top:  0px; width: 800px; height: 400px; border: 1px solid #999; background: #ece9d8; position: absolute;}
#frame {  left:  10px; top: 90px; width: 780px; height: 300px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
#tabs  {  left:  10px; top: 70px; width: 780px; height:  20px; position: absolute; }

/* align tabs to the right */

#tabs .aw-list-template {
    position: absolute;
    right: 0px;
    padding-right: 4px;
    text-align: right;
}

#tabs .aw-item-template {
    float: none;
}

Alex (ActiveWidgets)

April 16,

You...complete...me! <3

Thanks!

April 16,

Hi gentelmans ,it is not mentioned where to store the pages that each tab will connect to when we click on it ,,,

August 21,

Check the code in /examples/controls - tabs/ folder

Alex (ActiveWidgets)

August 21,

This topic is archived.

Tabs Alignment

See also:

Search

New Data Grid

Version 2