Forums

I have a Chronoconnectivity Connection that is working well. It has 16 columns of data. Most of the columns are numeric although I have a few date columns and a column that shows a textarea. I have experimented with the Data Listing Fields option which allows for "in-view" editing. It seems to work well.

The problem is that once enabled the input widths of the Data Listing fields are so wide that my view no longer fits on the screen. I have successfully reduced the widths using CSS but this causes new problems. Because the CSS can only be applied to the object called 'input' I end up with all 'input' objects in the view with the new width applied. Because I have no width control over the individual columns in the view, I end up with my numeric columns looking good with a width of 10px but the columns that show dates and textarea fields are now too narrow and are unusable.

So, is there a way to gain control of individual column widths when they are being used in Data Listing mode or is this a limitation of the system? If this is a limitation, are there any plans to add the ability to control individual column width when using Data listing fields?

Thanks for your help.

John

Hi John,

You can probably add CSS to control the overall width of the table; but the data will still control the width of the individual columns.

When this is a problem I usually switch to use a custom listing so that I can add style='width:xxxpx' into the <th> header tags of the list.

Bob

Thanks Bob,

I am using a custom listing to display my Chronoconnection. I have tried adding this <th style=width:8px !important;'> to the appropriate columns in my custom listing. I have also tried this <td style=width:8px !important;'> at the individual cell level. Either of these will have the desired effect and work as expected as long as I am not using the Data Listing Fields option. If I use the Data Listing Fields option it seems that all settings are overridden and the width of the column is determined by the default width of the 'input' field that is placed in the cell to allow for frontend editing.

Closer inspection of the custom listing with Chrome Developer Tools shows that an element called 'input' is embedded inside the cells of my table and the width of the cell is determined by the default width of the input element regardless of the amount of data inside the cell. (When using the Data Listing option, width is not determined by data in the cell.)

I have tried adding <style>input {width: 8px; !important;}</style> to the header section of my custom listing. This actually does change the width of the input element but I lose the ability to control the width of the input element at the column (or cell) level in my table. In other words, all instances of the input element in my custom listing will now be 8px wide. (In fact, the Search field at the top of my custom listing is affected as well.) Without control of the width of each column I am unable to take advantage of the very useful 'frontend editing' capabilities in my custom listing.

I would love to solve this problem as it would really make the UI of my application much better.

As always, thanks for your help.

John

After lots of searching I have found that the answer is to use "CSS Substring Matching Attribute Selectors". When using the Data Listing feature (which allows for frontend edits inside a Chronoconnection view) you can use Firebug or Chrome Developer Tools to discover the "name" of the input field in each cell of the table. Chronoconnection assigns a unique machine generated "name" to each input field using the format ccfld_MODELID[fieldname][unique number]. You can use CSS Substring Matching Attribute Selectors and define a style in the header section of your Custom Listing that looks like this:

<style>
input[name^="ccfld_MODELID[fieldname]"] { 
width:8px; 
}
</style>

The ^= tells the CSS to match input elements that have a name that begins with ccfld_MODELID[fieldname] and in the case of my example it sets the width to 8px;. This will set all input elements of a particular MODELID and field name to the desired width.

To apply the style to a specific field you don't use the ^ and just enter the = sign for an exact match. If applying the style using an exact match you would obviously have to include the unique number assigned to the element as well like this:

<style>
input[name="ccfld_MODELID[fieldname][number]"] { 
width:8px; 
}
</style>

For more on CSS Substring Matching Selector Attributes refer to http://www.css3.info/preview/attribute-selectors/.

John