diff --git a/bricks/conform.js b/bricks/conform.js
index f89b8e5..8a6059a 100644
--- a/bricks/conform.js
+++ b/bricks/conform.js
@@ -1,13 +1,28 @@
 var bricks = window.bricks || {};
-bricks.Conform = class extends bricks.Message {
+bricks.Conform = class extends bricks.PopupWindow {
 	constructor(opts){
-		opts.auto_open = true;
-		opts.auto_close = false;
 		opts.timeout = 0;
 		super(opts);
-		this.create_toolbar();
+		this.create_conform();
 	}
-	create_toolbar(){
+	create_conform(){
+		var w = new bricks.VBox({width:'100%', height: '100%'});
+		this.create_message(w);
+		this.create_toolbar(w);
+		this.add_widget(w);
+	}
+	create_message(widget){
+		var w = new bricks.Filler();
+		widget.add_widget(w);
+		var w1 = new bricks.VScrollPanel({});
+		w.add_widget(w1);
+		var t = new bricks.Text({otext:this.opts.message,
+					wrap:true,
+					halign:'middle',
+					i18n:true});
+		w1.add_widget(t);
+	}
+	create_toolbar(widget){
 		var desc = {
 			tools:[
 				bricks.extend({
@@ -26,7 +41,7 @@ bricks.Conform = class extends bricks.Message {
 		w.bind('conform', this.conform_hndl.bind(this));
 		w.bind('discard', this.discard_hndl.bind(this));
 		if (!w) return;
-		this.message_w.add_widget(w);
+		widget.add_widget(w);
 	}
 	conform_hndl(event){
 		this.dismiss();
diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index 7b8938d..74e4fbc 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -10,6 +10,11 @@ body {
 	box-sizing: border-box!important;
 }
 
+.flexbox {
+	height: 100%;
+	width: 100%;
+	display: flex;
+}
 .curpos {
 	border-radius: 30%;
 	background-color: #f5f5f5;
@@ -283,6 +288,11 @@ body {
 	height: 50px;
 	background-color: blue;
 }
+.childrensize {
+	display: flex;
+	flex-wrap: nowrap;
+	flex-shrink: 0;
+}
 .datagrid-row {
 	flex:0 0 150px;
 	display: flex;
@@ -349,10 +359,12 @@ body {
 	background-color: #dddddd;
 	position: sticky;
 	top: 0;
-	width: auto;
+	flex-wrap: nowrap;
+	flex-shrink: 0;
 }
 .tabular-row {
-	width: auto;
+	flex-wrap: nowrap;
+	flex-shrink: 0;
 	margin-bottom: 5px;
 }
 .tabular-row:nth-child(odd) {
@@ -365,7 +377,7 @@ body {
 	background-color: #ef0000;
 }
 .tabular-row-content {
-	padding: 10px;
+	padding: 2;
 }
 .tabular-cell {
 	border: 1px solid #ccc;
diff --git a/bricks/datarow.js b/bricks/datarow.js
index b9470a2..d32d14a 100644
--- a/bricks/datarow.js
+++ b/bricks/datarow.js
@@ -20,7 +20,6 @@ bricks.DataRow = class extends bricks.HBox {
 	*/
 	constructor(opts){
 		super(opts);
-		this.set_style('width', 'auto');
 		this.record_w = null;
 	}
 	render_header(){
@@ -87,6 +86,7 @@ bricks.DataRow = class extends bricks.HBox {
 	}
 	build_fields(header, cw){
 		this.record_w = new bricks.HBox({height:'auto'});
+		this.record_w.set_css('childrensize');
 		this.add_widget(this.record_w);
 		this._build_fields(header, this.record_w);
 	}
@@ -108,7 +108,7 @@ bricks.DataRow = class extends bricks.HBox {
 				continue;
 			}
 			var opts = bricks.extend({
-				margin:'3px'
+				margin:'1px'
 			}, f);
 			if (header || ! this.user_data){
 				opts.value = f.label || f.name;
@@ -119,6 +119,8 @@ bricks.DataRow = class extends bricks.HBox {
 			var cwidth = cwidths[f.name];
 			if (cwidth){
 				opts.cwidth = cwidth;
+			} else {
+				opts.cwidth = 10;
 			}
 			var f = bricks.get_ViewBuilder(f.uitype);
 			if (!f) f = bricks.get_ViewBuilder('str');
diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js
index 03c0f33..a7f02a2 100644
--- a/bricks/dataviewer.js
+++ b/bricks/dataviewer.js
@@ -216,6 +216,7 @@ bricks.DataViewer = class extends bricks.VBox {
 		}
 		var f = new bricks.ModalForm({
 				"widget":this,
+				"archor":"cc",
 				"movable":true,
 				"resizable":true,
 				"archor":"cc",
@@ -268,6 +269,8 @@ bricks.DataViewer = class extends bricks.VBox {
 	}
 	delete_record(row, record){
 		var conform_w = new bricks.Conform({
+			cwidth:16,
+			cheight:9,
 			target:this,
 			title:'Delete conform',
 			message:'Are you sure to delete is record?'
diff --git a/bricks/floaticonbar.js b/bricks/floaticonbar.js
index 437f4bf..eeb0a02 100644
--- a/bricks/floaticonbar.js
+++ b/bricks/floaticonbar.js
@@ -24,6 +24,7 @@ bricks.IconBar = class extends bricks.HBox {
 			opts.rate = 1;
 		}
 		super(opts);
+		this.set_css('childrensize');
 		this.height_int = 0;
 		var tools = this.opts.tools;
 		for (var i=0;i<tools.length;i++){
diff --git a/bricks/message.js b/bricks/message.js
index f71f59b..54c3c44 100644
--- a/bricks/message.js
+++ b/bricks/message.js
@@ -14,15 +14,15 @@ bricks.Message = class extends bricks.PopupWindow {
 		this.panel.set_css('message');
 	}
 	create_message_widget(){
-		this.message_w = new bricks.VBox({width:'100%',height:'100%'});
 		var w = new bricks.Filler();
-		this.message_w.add_widget(w);
+		this.add_widget(w);
+		var w1 = new bricks.VScrollPanel({});
+		w.add_widget(w1);
 		var t = new bricks.Text({otext:this.opts.message,
 					wrap:true,
 					halign:'middle',
 					i18n:true});
-		w.add_widget(t);
-		this.add_widget(this.message_w);
+		w1.add_widget(t);
 	}
 }
 
@@ -34,11 +34,15 @@ bricks.Error = class extends bricks.Message {
 }
 
 bricks.show_error = function(opts){
+	opts.cheight = opts.cheight || 9;
+	opts.cwidth = opts.cwidth || 16;
 	var w = new bricks.Error(opts);
 	w.open();
 }
 
 bricks.show_message = function(opts){
+	opts.cheight = opts.cheight || 9;
+	opts.cwidth = opts.cwidth || 16;
 	var w = new bricks.Message(opts);
 	w.open();
 }
diff --git a/bricks/popup.js b/bricks/popup.js
index 6e5c51b..f7bb225 100644
--- a/bricks/popup.js
+++ b/bricks/popup.js
@@ -15,14 +15,18 @@ bricks.Popup = class extends bricks.VBox {
 	*/
 	constructor(opts){
 		super(opts);
+		this.no_opened = true;
 		this.auto_task = null;
 		this.issub = false;
 		this.opened = false;
 		this.set_css('popup');
-		this.old_add_widget = super.add_widget.bind(this);
 		const zindex = bricks.app.new_zindex();
 		this.set_style('zIndex', zindex);
 		this.moving_w = this;
+		this.content_box = new bricks.VBox({width:'100%', height:'100%'});
+		this.content_box.set_style('display', 'flex');
+		this.content_box.set_style('overflow', 'auto');
+		super.add_widget(this.content_box);
 		if (this.auto_dismiss){
 			bricks.Body.bind('click', this.click_outside.bind(this));
 		}
@@ -40,7 +44,7 @@ bricks.Popup = class extends bricks.VBox {
 	}
 	setup_resizable(){
 		this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')});
-		this.old_add_widget(this.resizable_w);
+		super.add_widget(this.resizable_w);
 		this.resizable_w.set_css('resizebox');
 		this.resizable_w.bind('mousedown', this.resize_start_pos.bind(this));
 		bricks.Body.bind('mousemove', this.resizing.bind(this));
@@ -79,13 +83,80 @@ bricks.Popup = class extends bricks.VBox {
 		// console.log('resizing():', this.resize_status, cx, cy);
 		e.preventDefault();
 	}
+	positify_tl(){
+		var rect, w, h, t, l;
+		if (this.top && this.left){
+			this.set_style('top', this.top);
+			this.set_style('left', this.left);
+			return;
+		}
+		rect = bricks.app.showRectage();
+		if (this.cwidth && this.cwidth > 0){
+			w = this.cwidth * bricks.app.charsize;
+		} else if (this.width){
+			if (this.width.endsWith('px')){
+				w = parseFloat(this.width);
+			} else {
+				w = parseFloat(this.width) * rect.width / 100;
+			}
+		} else {
+			w = rect.width * 0.8;
+		}
+		if (this.cheight && this.cheight > 0){
+			h = this.cheight * bricks.app.charsize;
+		} else if (this.height){
+			if (this.height.endsWith('px')){
+				h = parseFloat(this.height);
+			} else {
+				h = parseFloat(this.height) * rect.height / 100;
+			}
+		} else {
+			h = rect.height * 0.8;
+		}
+		var archor = this.archor || 'cc';
+		switch(archor[0]){
+			case 't':
+				t = 0;
+				break;
+			case 'c':
+				t = (rect.height - h) / 2;
+				break;
+			case 'b':
+				t = rect.height - h;
+				break;
+			default:
+				t = (rect.height - h) / 2;
+				break;
+		}	
+		switch(archor[1]){
+			case 'l':
+				l = 0;
+				break;
+			case 'c':
+				l = (rect.width - w) / 2;
+				break;
+			case 'r':
+				l = rect.width - w;
+				break;
+			default:
+				l = (rect.width - w) / 2;
+				break;
+		}	
+		this.set_style('top', t + 'px');
+		this.set_style('left', l + 'px');
+		return {
+			top:t,
+			left:l
+		}
+	}
+			
 	stop_resizing(e){
 		this.resize_status = false;
 		bricks.Body.unbind('mousemove', this.resizing.bind(this));
 		bricks.Body.unbind('mouseup', this.stop_resizing.bind(this));
 		// console.log('stop_resizing():', this.resize_status);
 	}
-
+	
 	setup_movable(){
 		this.moving_w.bind('mousedown', this.rec_start_pos.bind(this));
 		this.moving_w.bind('touchstart', this.rec_start_pos.bind(this));
@@ -97,8 +168,11 @@ bricks.Popup = class extends bricks.VBox {
 			return;
 		}
 		this.moving_status = true;
-		this.offsetX = e.clientX - this.showRectage().left;
-		this.offsetY = e.clientY - this.showRectage().top;
+		var rect = this.showRectage();
+		this.offsetX = e.clientX - rect.left;
+		this.offsetY = e.clientY - rect.top;
+		console.log(rect, '========', this.offsetX, this.offsetY, e.clientX, e.clientY);
+		
 		bricks.Body.bind('mouseup', this.stop_moving.bind(this));
 		bricks.Body.bind('touchend', this.stop_moving.bind(this));
 		this.moving_w.bind('mousemove', this.moving.bind(this));
@@ -118,8 +192,10 @@ bricks.Popup = class extends bricks.VBox {
 		var cx, cy;
 		cx = e.clientX - this.offsetX;
 		cy = e.clientY - this.offsetY;
+		console.log(cx, cy, e.clientX, e.clientY, this.offsetX, this.offsetY, '==========');
 		this.set_style('left', cx + 'px');
 		this.set_style('top',  cy + 'px');
+		e.preventDefault();
 	}
 	stop_moving(e){
 		// console.log('stop moving ....');
@@ -135,19 +211,11 @@ bricks.Popup = class extends bricks.VBox {
 		}
 	}
 	add_widget(w, index){
-		this.old_add_widget(w, index);
+		this.content_box.add_widget(w, index);
 		if (this.auto_open){
 			this.open();
-		}
-	}
-	transform2screen_at(rect, lt){
-		var screen_rect = bricks.Body.showRectage();
-		var t, l;
-		t = rect.top + parseInt(lt.y) / 100 * (rect.bottom - rect.top);
-		l = rect.left + parseInt(lt.x) / 100 * (rect.right - rect.left);
-		return {
-			top:t + 'px',
-			left:l + 'px'
+		} else {
+			console.log('auto_open is ', this.auto_open, ' so not auto open it', this.opts, w);
 		}
 	}
 	open(){
@@ -156,40 +224,28 @@ bricks.Popup = class extends bricks.VBox {
 			return;
 		}
 		this.opened = true;
-		if (this.widget instanceof bricks.JsWidget){
-			this.target_w = this.widget;
-			this.issub = true;
-		} else {
-			var w = bricks.getWidgetById(this.widget, bricks.Body);
-			if (w){
-				this.issub = true
-				this.target_w = w;
-			} 
-		}
-		rect = this.target_w.showRectage();
-		var lt = archor_at(this.archor);
-		if (this.issub){
-			lt = this.transform2screen_at(rect, lt);
-			if (typeof(this.width) == 'string' && this.width.endsWith('%')){
-				w = parseFloat(rect.width) * parseFloat(this.width) / 100;
-				this.set_style('width', w + 'px');
-				console.log('rect=', rect, 'w=', w);
-			}
-			if (typeof(this.height) == 'string' && this.height.endsWith('%')){
-				h = parseFloat(rect.height) * parseFloat(this.height) / 100;
-				this.set_style('height', h + 'px');
-				console.log('rect=', rect, 'h=', h);
+		if (this.no_opened){
+			if (this.widget instanceof bricks.JsWidget){
+				this.target_w = this.widget;
+				this.issub = true;
+			} else {
+				var w = bricks.getWidgetById(this.widget, bricks.Body);
+				if (w){
+					this.issub = true
+					this.target_w = w;
+				} 
 			}
+			this.positify_tl()
 		}
-		this.set_style('top',lt.top);
-		this.set_style('left',lt.left);
+		this.no_opened = false;
 		this.set_style('display', 'block');
 		if (this.timeout > 0){
-			this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout)
+			this.auto_task = schedule_once(this.dismiss.bind(this), this.timeout)
 		}
-		if (this.opts.modal){
+		if (this.opts.modal && this.opts.widget){
 			this.target_w.disabled(true);
 		}
+		this.content_box.disabled(false);
 	}
 	dismiss(){
 		if (this.opts.modal){
@@ -226,18 +282,24 @@ bricks.PopupWindow = class extends bricks.Popup {
 	}
 	*/
 	constructor(opts){
+		opts.moviable = true;
+		opts.resizable = true;
+		opts.auto_open = true;
+		opts.auto_dismiss = false;
+		opts.auto_destroy = false;
 		super(opts);
-		this.title_bar = new bricks.HBox({cheight:1, width:'100%'});
+		this.title_bar = new bricks.HBox({cheight:1.5, width:'100%'});
 		this.title_bar.set_css('titlebar')
-		this.auto_destroy = false;
 		this.moving_w = this.title_bar;
-		this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this);
-		this.old_add_widget(this.title_bar);
+		this.parent_add_widget(this.title_bar);
 		this.build_title_bar();
 		var filler = new bricks.Filler({});
-		this.old_add_widget(filler)
-		this.content_w = new bricks.VScrollPanel({width:"100%"});
+		this.parent_add_widget(filler)
+		this.content_w = new bricks.Layout({});
+		this.content_w.set_css('flexbox');
+		this.auto_open = true;
 		filler.add_widget(this.content_w);
+		console.log(this.auto_open, 'opts=', opts);
 	}
 	async load_content(){
 		var dic = {
@@ -295,10 +357,20 @@ bricks.PopupWindow = class extends bricks.Popup {
 			this.title_w.set_text(txt);
 		}
 	}
+	parent_add_widget(w, index){
+		var ao = this.autho_open;
+		this.auto_open = false;
+		super.add_widget(w, index);
+		this.auto_open = ao;
+	}
 	add_widget(w, index){
+		console.log('auto_open=', this.auto_open);
 		this.content_w.add_widget(w, index);
 		if (this.auto_open){
 			this.open();
+		} else {
+			this.open();
+			console.log('auto_open is false, not auto open');
 		}
 	}
 	open(){
diff --git a/bricks/tree.js b/bricks/tree.js
index 18dee0d..77c3e81 100755
--- a/bricks/tree.js
+++ b/bricks/tree.js
@@ -316,6 +316,8 @@ bricks.Tree = class extends bricks.VScrollPanel {
 			return;
 		}
 		var w = new bricks.Conform({
+			cwidth:16,
+			cheight:9,
 			title:'Delete node',
 			message:'Please conform delete selected node'
 		});