473,382 Members | 1,441 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

User alterable column/row sizes with IE

I'd like to know if it's possible to have
a drag style mechanism (or other simple
way) in which to alter the width of a
specific column or height of a specifi row
in a table.

For example, in the code below, if on my
Win 2K Pro IE 5.5 machine you click on the
border of the table, and then click and drag,
you can alter the width or height of the entire
table. (If you alter the width, you my notice
that the width of the two columns maintain a
3:2 ratio).

Thanks for any tips on how to do this for columns/rows,
Csaba Gabor from New York

<DIV contentEditable>
<TABLE border=1>
<COLGROUP style="width:1in">
<COLGROUP style="width:1.5in">
<TR>
<TD>foo</TD>
<TD>bar</TD>
</TR>
<TR>
<TD>baz</TD>
<TD>borf</TD>
</TR>
</TABLE>
</DIV>
Jul 20 '05 #1
3 5096
I've had difficulty with dynamically sizing tables.

Have you considered making your cells spans with various classes?
Then you can dynamically alter the class definitions to achieve
dynamic resizing.
Jul 20 '05 #2
Thanks for your idea. You could take several approaches to this
problem, such as the one that Yep offered. I haven't seen any
that are 100% satisfactory, but probably some can be refined. I'd
like to be able to use the built in positioning that contentEditable
offers (since it's built in - less javascript overhead), but I've only
gotten it to work nicely for the entire table resizing. Furthermore,
Yep's approach is more widely applicable.

I offer my approach with contentEditable (only works with IE 5.5+)
below, but it's not a clean solution. If you've got an example with
your dynamic SPAN redefinitions, it would be great to see it.

Regards from New York,
Csaba Gabor

<html>
<head>
<title>contentEditable / table resizing tests</title>
<script type="text/javascript">
function prep() {
document.execCommand("2D-position",false,true);
for (var span in document.getElementsByTagName("SPAN"))
span.contentEditable = true;
}
</script>
</head>
<body style="margin:5%" onLoad="prep()">
This is supposed to show how various settings affect the
alterability of table columns and rows. None of
them is satisfactory.<br>Note that frob and Hello World
have to have contentEditable explicitly declared
in the element definition to have the 2D-Position enabled.
<br>Also, note that if the &lt;td> elements are enclosed in
&lt;div>s instead of &lt;span>s that there would be an
an extra space below each unless height was set to 100%
(which would disable row resizing).<br>&nbsp;
<div contentEditable style="border:dashed 2px gold">
<table border=1>
<tr>
<td><span style="background-color:red;height:100%">foo</span></td>
</tr><tr>
<td><span style="background-color:orange;width:100%">bar</span></td>
</tr><tr>
<td><span style="background-color:yellow;height:100%;width:100%">baz</span></td>
</tr><tr>
<td><span style="background-color:green">frob</span></td>
</tr>

<tr>
<td style="height:2.46em"><span style="background-color:blue;height:100%">Hi Mom</span></td>
</tr><tr>
<td style="height:2.46em"><span style="background-color:indigo;width:100%">Hi Dad</span></td>
</tr><tr>
<td style="height:2.46em"><span style="background-color:violet;height:100%;width:100%">Hi Bro</span></td>
</tr><tr>
<td style="height:2.46em"><span style="background-color:silver">Hello World</span></td>
</tr>

</table></div></body></html>
"asdf asdf" <b0*****@yahoo.com> wrote in message news:6f**************************@posting.google.c om...
I've had difficulty with dynamically sizing tables.

Have you considered making your cells spans with various classes?
Then you can dynamically alter the class definitions to achieve
dynamic resizing.

Jul 20 '05 #3
Hi Yep,

Thanks for your reply and example. You have some neat
techniques in your coding. I've had a project on the back
burner for a while that needed to have editable cells (so
IE 5.5+ only) where the size adapted with 1 or 2 rows (scroll
bars if necessary). I had presumed that if I could do that,
then I would make no other demands on my system. Now
that my main problem is solved (through the wonderful
observation of Richard Cornford at
http://groups.google.com/groups?th=6397c6ac32865f50
in an earlier post) I realize once again that I have been
deluding myself. The original (and still current) approach
is to do what you suggest in allowing the user to enter
specific dimensions in some form field.

But I would love to put in column/row resizing via mouse
(because it will allow the user to be more efficient). And from
what I've seen so far, your approach is the one I like the most.
I think I should just ensure that the cursor changes to a hand
when it's over a border and somehow account for changing the
entire table width/height vs final column width/row height.

Another approach I thought of which I haven't been able
to make work cleanly uses contentEditable and is illustrated
under my response to "asdf asdf"within this thread.

Best regards from New York,
Csaba Gabor
Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Brett Maton | last post by:
Hi NG, How do I find out the size of a column ? I am retrieving large objects from the pg_largeobject table and creating a files, I would like to know the length of the data column so that I...
0
by: Lester Knutsen | last post by:
Washington Area IBM Informix/DB2 User Group meeting - June 7, 2005 -------------------------------------------------------------- Mark the date, our next user group meeting will be another...
1
by: JC Mugs | last post by:
Does anyone know how to set user defined paper sizes for and Epson LQ570E Printer under Windows XP Prof? The driver does not allow for user defined paper sizes.. So setting them from a report...
4
by: Phil | last post by:
As a new user, I was pleased I was able to build tables and connect them properly (I think), but am having one problem on forms. How does one go about creating a form, where on field on the form...
0
by: Chris Millar | last post by:
I have a user control that i wish to extend to change the date when the user selects the numeric up down button. The code explains itself, hope someone can help. any ideas appreaciated.. ...
0
by: GroZZleR | last post by:
Hey all, How can you expand the column sizes to ALWAYS take up atleast 100% of the DataGrid / DataTable? Right now my columns look like this: http://www.grozzler.com/dump/dt_mine.png I...
40
by: Paul Davis | last post by:
Hi all, I'm building some style sheets and trying to play the old game of balancing designer pixel perfection and still allowing users to adjust their font sizes. The compromise I've made with the...
3
by: Birky | last post by:
I’m looking for suggestions to see if it is possible to produce information in a read only format for my users. I have an event log within an Access table which tracks all the installations within...
1
by: Man4ish | last post by:
Hi, How Eventlistner can be used with rendred combo box. I got one example of combobox in table as follows . /* * Copyright (c) 1995 - 2008 Sun Microsystems, Inc. All rights reserved. * ...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.