DateField in Table [Archive]

Aver

10 Jul 2007, 12:03 PM

Can someone please look at this and tell me if this is in fact a bug.. I am using Ext 1.1 Beta 2
and the problem here is that the trigger image appears on the right hand side of the column border.

<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">

Ext.onReady(function()
{
var dp = new Ext.form.DateField();
dp.render('test');
});

</script>
</head>
<body>
<table style="width:500px;border:solid 1px black;height:100px;">
<tr>
<td style="width:40%;border:solid 1px black;">a
</td>
<td style="width:60%;border:solid 1px black;text-align:right;vertical-align:middle;">
<div id="test" style="text-align:right;float:right;">
</div>
</td>
</tr>
</table>
</body>
</html>

I can fix the above by changing the following in the ext-all.css

ext-all.css (line 488)
.x-form-field-wrap .x-form-trigger {background:transparent url(../images/default/form/trigger.gif) no-repeat scroll 0pt;
border-color:-moz-use-text-color -moz-use-text-color #B5B8C8;
border-style:none none solid;
border-width:0pt 0pt 1px;
cursor:pointer;
height:21px;
position:relative; ** Changed to relative from absolute
top:0pt;
width:17px;
}

ext-all.css (line 433)
.x-form-text {
height:22px;
line-height:18px;
vertical-align:top; -- Changed to TOP from middle
}

jack.slocum

10 Jul 2007, 8:04 PM

Like any elements setup with CSS, Ext components are subjected to the control of their containing element. There is really no way Ext can guess every environment, table, floated divs, padding, margins, etc and make adustments for them. There is where a little CSS knowledge on your end can help correct issues in your environment.

With that said, thanks for sharing your solution. I am sure there will others that find it useful!

brian.moeskau

11 Jul 2007, 6:02 AM

As a minor note, you should apply CSS patches in your own CSS file, included after ext-all.css, rather than directly editing ext-all.css to make future updates easier.

jay@moduscreate.com

11 Jul 2007, 6:04 AM

As a minor note, you should apply CSS patches in your own CSS file, included after ext-all.css, rather than directly editing ext-all.css to make future updates easier.

I always include ext-all.css as the last CSS File to ensure no CSS Bleed over :-\

brian.moeskau

11 Jul 2007, 6:11 AM

What I mean is creating a separate css file just for patches and including it last. Keeping track of manual updates to ext-all.css across new releases of the framework will not be fun.

Aver

11 Jul 2007, 7:59 AM

Like any elements setup with CSS, Ext components are subjected to the control of their containing element. There is really no way Ext can guess every environment, table, floated divs, padding, margins, etc and make adustments for them. There is where a little CSS knowledge on your end can help correct issues in your environment.

With that said, thanks for sharing your solution. I am sure there will others that find it useful!

Should the trigger not be placed relative to the container div though ? Right now it is absolutely positioned which takes it out of the document flow which is why I assume it is going over the table border..

I guess the bug I was trying to point out would be when you right align a DateField..

I tried using the CSS below on both the example above and in a ExtJS form I created and I see no ill effects from the change.

<style type="text/css">
.x-form-field-wrap .x-form-trigger
{
position:relative;
}

.x-form-text
{
vertical-align:top;
}
</style>

Thank you very much for all your help and support.. Ext is truly a great product