Resizing column width

[Joe Wicentowski]

Hi all,

Is there any way to adjust the width of columns in OpenRefine?  Sometimes, depending on the length of the content of a column, the width can be so long that it pushes columns off to the right that I would like to be able to see.  

I know I can hide columns, but what I am hoping for is to keep a column visible while limiting its width somehow, perhaps by specifying a max-width property on a per-column basis (if not be able to resize columns more dynamically, as one might expect to in a spreadsheet application).  

If this isn't possible, I'd understand, but I thought I'd ask to see if there was already some mechanism for this that I wasn't able to find by searching the documentation or the group history.

Thanks!

Joe

[Thad Guidry]

Yes actually you can Joe,

Edit the LESS file under your similar path of :

C:\openrefine-win-2.7\openrefine-2.7\webapp\modules\core\styles\views\data-table-view.less

Edit .less file (its a preprocessed compacted CSS basically) in several areas to your hearts content (make a copy / backup before you start hacking ) :)

The Moz Style Editor might be easier to help you along and has good advice in general: https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

You'll want to add and hardcode something the

width: 100px;

or whatever works for you.

The main elements to start with would be

column-header

div.data-table-cell-content

div.data-table-cell-content-numeric

And others that I probably forgot, but you can experiment in Firefox or Chrome by just hovering over the elements on the data grid and right click and INSPECT ELEMENT on the browsers context menu.

There are a few other ways, like some of the files under

C:\openrefine-win-2.7\openrefine-2.7\webapp\modules\core\scripts\views\data-table

and in Jquery scripts itself, etc. maybe others that I am forgetting since its been so long, but the .less file is probably the easiest for you to start with quickly to get what you want.

You are now an official web developer :)

A final way to to get others to help by hacking on this by customizing the HTML and .JS and .LESS files and then zipping up the OpenRefine scripts and styles folder and sending it your way for you to overwrite your folders. :)

-Thad

+ThadGuidry  

--
You received this message because you are subscribed to the Google Groups "OpenRefine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openrefine+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Thad Guidry]

If you'd like a preferences kinda way we could probably add that eventually.  Just open an enhancement request.

Oh I just remembered another thing to look at, yeah our javascript for the data-table-view itself that uses a bit of calculation, which you can alter...

C:\openrefine-win-2.7\openrefine-2.7\webapp\modules\core\scripts\views\data-table\data-table-view.js

Line 461 thereabouts and probably other lines.  Just browse around that file, make a copy of it, edit it and reload your browser.

You can open the console panel for the browser to see debug information when hacking on javascript files.

You can break OpenRefine functionality when editing .js files. (you have been warned, but I'd highly encourage you play around).  No harm can be done if you backup your installation folder of OpenRefine of course :)

-Thad

+ThadGuidry  

[Joe Wicentowski]

Hi Thad,

Thanks so much for these tips!  That's great to know that I can dig in and set min- and max-width on columns via less (or tweak on the fly via the web inspector).  

Now I'm starting to imagine a more dynamic, user-friendly method of resizing/customizing column widths.  Sometimes you want columns to be narrow, and other times you want them wide—even in the course of a single editing session.  I think this is particularly the case as your columns grow and your screen real estate is fixed.  

I did spot some promising options for https://stackoverflow.com/questions/6156182/resizable-table-columns-with-jquery.  While I lack any javascript chops to implement such a feature myself, I could certainly create a feature request in an issue, if you think this has any merit.  I will probably go ahead and create one after a few days, in case your or anyone else wants to weigh in on this?

Thanks again,

Joe

To unsubscribe from this group and stop receiving emails from it, send an email to openrefine+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "OpenRefine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to openrefine+unsubscribe@googlegroups.com.

[Thad Guidry]

Yeap, that the idea...resizeable columns on the fly when you need.  We'll probably eventually get to the UI refresh...when / if I ever get the time to dig back into Jquery and pluck out the native support that now lives in browsers, just as a 1st pass for improving things.  (Jquery did things for alignment during the browser wars before things became standard fare in all the browsers...but now, the major browsers do most of the trickery automatically and for free with simple javascript, html, css....so a refresh / reworking of the UI in OpenRefine is really needed after now 6 almost 7 years )

Go ahead and open a brand new enhancement issue (rather then adding to that old existing issue that we already had).

In that issue I'd like to hear your thoughts on where and what the resizing should look like and function.  Should the header row separators be the norm , like Excel uses, etc ?

-Thad

+ThadGuidry  

To unsubscribe from this group and stop receiving emails from it, send an email to openrefine+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "OpenRefine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to openrefine+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "OpenRefine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to openrefine+...@googlegroups.com.