Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Joe Forest on Jun 26, 2008 06:23
open dhtmlx forum
verticalAlign in editor.obj

Hi,
This code won't adjust the vertical alignment.
I tried adjusting it in the .CSS file, but no success.
Can you please tell me how it should be done.

function doOnRowSelected(rowID,celInd){
if (celInd == 2) {
mygrid.editCell();
this.editor.obj.style.verticalAlign="middle";
this.editor.obj.parentNode.style.verticalAlign="middle";
this.editor.obj.select();
}
}
Answer posted by Support on Jun 26, 2008 06:32
If you want to change vertical align - it can be done in dhtmlxgrid.css
    .dhx_combo_edit{
    .dhx_textarea{

In case of js-only solution, your code is correct, except of txt editor in FF, If you are using "txt" editor, the code will look as

this.editor.obj.style.verticalAlign="middle";
if (_isFF && this.editor.obj.firstChild ) this.editor.obj.firstChild.style.verticalAlign="middle";
Answer posted by Joe Forest on Jun 26, 2008 08:02
I'm using the "ed" editor.
I added vertical-align:middle; to .dhx_combo_edit in dhtmlxgrid.css - no change.
this.editor.obj.style.verticalAlign="middle";  also produces no change
Since the cells are bigger because of an image in one cell, I'm trying to position both the cell data and the editor data so it looks and acts like a regular html textbox.
the csv data loads in FF3 and this.editor.obj.select() works well, but the csv data doesn't even load in IE7

CODE:
var mygrid;
function doInitGrid(){
    mygrid = new dhtmlXGridObject('mygrid_container');
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("a,Model,Qty,Price,b");
    mygrid.setInitWidthsP("*,30,10,10,25");
    mygrid.setColAlign("center,left,center,right,center");
    mygrid.setSkin("light");
    mygrid.setColSorting("na,str,int,na,na");
    mygrid.setColTypes("ch,ed,ed,price,img");
    mygrid.setColVAlign("middle");
    mygrid.attachEvent("onRowSelect",doOnRowSelected);
    mygrid.init();
    mygrid.load("silverdata.csv","","csv");
}
function doOnRowSelected(rowID,celInd){
    if (celInd == 2) {
        mygrid.editCell();
        this.editor.obj.style.verticalAlign="middle";
        this.editor.obj.select();
    }
}

<body onload="doInitGrid();">
<div id="mygrid_container" style="width:99%;height:500px;"></div>

CSV
1,,ring,100,20,ASM001_small1.gif
2,,ring,200,10,ASM001_small1.gif
3,,ring,150,20,ASM001_small1.gif
4,,ring,160,30,ASM001_small1.gif
5,,ring,190,15,ASM001_small1.gif
Answer posted by Support on Jun 27, 2008 03:04
You need to add next line , to have the grid function correctly in all browser
    mygrid.enableMultiline(true) // render rows with non-default height correctly

The ed cell generates a textarea control when in editable state, the verticalAlign style will not change the align of text inside it, but if you know expected height of row , you can use paddings
if (celInd == 2) {
        mygrid.editCell();
        this.editor.obj.style.paddingTop="10px";
Answer posted by Joe Forest on Jun 26, 2008 12:19
Thank you.
This works perfectly by also adding a line for a negative marginBottom:

function doOnRowSelected(rowID,celInd){
    if (celInd == 2) {
        mygrid.editCell();
        this.editor.obj.style.paddingTop="34px";
        this.editor.obj.style.marginBottom="-34px";
        this.editor.obj.select();
    }
}