Cell size/look in grid

Suite and Optimus Suite 5
#1

Hello,

I have created a grid with editable columns/cells and when I double click on any of them to start typing in the size or maybe the look do not look as it should be. The snapshot illustrates what I am trying to say. The grid data is coming from a DB if that makes any difference. Can someone explain to me why is this happening (in all browsers) and is there any way to get it corrected to make look normal (like in a normal text box without any changes when you set the focus or double click on a cell).

grid.GIF791×83 9.24 KB

#2

Hello,

Unfortunately it’s not obvious on the screenshot what grid you mean and where you have created it.
Could you please reproduce the issue here docs.dhtmlx.com/scheduler/snippet/ or at least send us screenshot of larger size and show on it what exactly wrong?

#3

Thank you for the reply I am attaching a bigger screenshot hopefully you can see what I am trying to say- If my post is in the wrong forum please advise - I am not trying to create a scheduler - and here’s my code (I am newbie bty and I like dhtmlx)

Test 
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
html, body { width: 100%; /*provides the correct work of a full-screen layout*/ height: 100%; /*provides the correct work of a full-screen layout*/ overflow: hidden; /*hides the default body's space*/ margin: 0px; /*hides the body's scrolls*/ } 
<script type="text/javascript" charset="utf-8">
    dhtmlxEvent(window,"load",function(){ 
	
	
        var myLayout = new dhtmlXLayoutObject(document.body,"2U"); 
		
		var myTree = myLayout.cells("a").attachTree();
			myTree.setImagesPath("codebase/imgs/");		
			myTree.load("data/treeStruct.xml");				
			myLayout.cells("a").setWidth(250);
			myLayout.cells("a").setText("Menu"); 
			myLayout.cells("b").hideHeader(); 
			
		var ribbon = myLayout.attachRibbon({
				skin : "dhx_skyblue", icons_path : "codebase/imgs/"
			});	
			
		var myGrid = myLayout.cells("b").attachGrid();
			
			myGrid.setImagePath("codebase/imgs/");    //sets the path to the source images
			myGrid.setIconsPath("icons/");                //sets the path to custom images
			
			myGrid.setHeader("name, Status");  
			
			myGrid.enableMultiselect(true);
			myGrid.enableMultiline(true);
	
			myGrid.init();
			myGrid.load("tasks.php");
			
			var mydp = new dataProcessor ("customers.php");
			mydp.init(myGrid);

			var toolbar2 = myLayout.cells("b").attachToolbar();
			toolbar2.setIconsPath('imgs/');
			toolbar2.loadStruct('data/toolbar.xml');

});

</script>
grid.GIF1598×451 66.1 KB

#4

Please, make sure that you didn’t modify the css styles of the dhtmlxgrid.
If the problem still occurs for you please, provide a complete demo, where the problem can be reconstructed locally.
Here you can find a tutorial about crating a complete demo:
docs.dhtmlx.com/tutorials__auxi … pport.html

#5

Hi Sematik,

I am newbie as I mentioned earlier and I am not sure if I made any changes to the CSS file of dhtmlxgrid. Everything is still in my laptop for now. Do you suggest any 3rd party host where I can post my demo. Also can you suggest any CSS file I can try to see if that helps with the issue?

Thank you so much for your assistance.

#6

Thanks for the hint. I just replaced the CSS dhtmlx file (not dhtmlxgrid) with a different one that is for different skin and it worked fine but when I used the skyblue I see that issue. Not sure why though?

#7

Hello.

The problem is confirmed. We’re working on a solution.
As a workaround you may try to remove the multiline mode:
//myGrid.enableMultiline(true);

#8

Please, try to use the attach css file instead of the original.
Also, you need to add the following css on your page:
.gridbox_dhx_skyblue.gridbox .objbox td {
line-height: 22px;
}
dhtmlx.zip (21.7 KB)

#9

Thank you so so so much Sematic for the css file. It works great now :slight_smile: