Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Dan Castillo on Jan 02, 2009 06:11
open dhtmlx forum
set position of content in tabbbar

I have a you grid component on your tabbar component and would like to change the default position of the GRID on the a tab. I have tried the following using CSS:

#mygrid_container {
    position:relative;
    top: 20%;
}
The #mygrid_cointainer is the DIV that is placed inside the tab control. If is use left 20% that works and the grid is moved to the left, but the "top" css command has no affect. I have also tried to do ABSOLUTE position and it has no affect.

I am attaching the entire JS code below that I use to initialize the project.


Thanks
==================PROJECT CODE======================================
<html>
<head>
<title>Test</title>
</head>

<body onload="myInit();">

<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxtabbar.css">
<link rel="STYLESHEET" type="text/css" href="test.css">

<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxgrid.js"></script>
<script src="codebase/dhtmlxgridcell.js"></script>
<script src="codebase/dhtmlxdataprocessor.js"></script>
<script src="codebase/dhtmlxtabbar.js"></script>
<script src="codebase/dhtmlxtabbar_start.js"></script>



<div id="mygrid_container" style="width:750px;height:150px;"></div>
<div id="a_tabbar" style="width:900;height:400"></div>

<script>
var mygrid;
var tabbar;

function myInit(){
doInitGrid();
initTabbar();
}

    function doInitGrid(){

mygrid = new dhtmlXGridObject('mygrid_container');

mygrid.setImagePath("codebase/imgs/");

mygrid.setHeader("Model,Qty,Price");

mygrid.setInitWidths("*,150,150");

mygrid.setColAlign("left,right,right");

mygrid.setSkin("light");

//allows for client side sorting
mygrid.setColSorting("str,int,int");

//set up column types
mygrid.setColTypes("ed,ed,price");


mygrid.init();

mygrid.loadXML("widget.htm");

var dp = new dataProcessor("widget.htm");
    dp.setTransactionMode("POST");
    //dp.enableDebug(true);
    dp.init(mygrid);
}

function initTabbar(){

tabbar=new dhtmlXTabBar("a_tabbar","top");
tabbar.setImagePath("codebase/imgs/");
tabbar.setSkinColors("#FCFBFC","#F4F3EE");

tabbar.addTab("a1","Search","100px");
tabbar.addTab("a2","Add/Edit","100px");

tabbar.setContent("a1","mygrid_container");
//tabbar.setContent("a2","html_2");
tabbar.setTabActive("a1");
tabbar.enableAutoSize(true,true);
            //tabbar.enableAutoReSize(true);


}



Answer posted by Support on Jan 10, 2009 08:45
The problem is not related to components, both tabbar and grid containers are native HTML elements and works in exact same way as normal HTML containers. 
Styling which will be correct for normal HTML elements will work for component's containers as well.