Long labels on lists and forms

I guess, it can be solved with custom CSS.

Can you supply screenshots, or even better: a demo link?

Which cobalt templates are you using? Defaults?

Sure, here are screen shots. The full article and submission form are defaults. The list is using Table Advanced.

Thanks,

Kent

You can actually see the initial job application at: http://teamlmi.com/job-application/submit/2-applications/2

This shows the long questions formatting nicely.

think best approach is to create CSS customizations or custom templates.

Actually, everything can be adjusted with configuration and extra CSS.

If you stick with those very long labels as "question titles", you could set the field label parameters accordingly. See for "BREAK AFTER LABEL". This parameter can be active for submission form and/or article full view!

This splits your label and field value in separate "lines". Actually multiple DIVs, separated by a clearing DIV. The result is still not formatted for your needs... the bootstrap CSS has a fixed 160 pixel width for control-labels. They also have text-align set to right. At least, those two properties have to be changed i.e.:

.form-horizontal .control-label {

width: 100%;

text-align: left;

}

HeadsUp: This might change ALL elements on your site, which have this basic CSS class!

A good advice, is to enter a CUSTOM CSS class for your labels. Found in each field parameter set! Sometimes it is easier to target your specific elements without altering other parts of the page.

.YOURCUSTOMCLASS .form-horizontal .control-label {

width: 100%;

text-align: left;

}

Unfortunately, your CSS custom class is NOT USED in ADV. TABLE TEMPLATE. But in all other templates, as far as i know.

@Sergey

Maybe a good idea to keep and output all custom classes in the Adv.Table Template?!! Why are they dropped anyway? I know, the template gives a vast amount of configuration options, but it should follow the usual Cobalt logic and respect the field parameters.

Regarding your Table Header in Adv.Table template:

You can alter the label wrapping behavior with CSS, too. A bit harder to target them, but should be possible... i think the only Cobalt CSS for the table is .table-records and the section-##. The ## is your section ID number, if you want to add this class, too.

So, you can try to target the table header labels with:

.table-records section-## thead th {

white-space: normal;

}

Additionally, i would set the article "Title" to nowrap. The max length can be set in template parameters, if you want a unified look and 1 line.

.table-records section-## .record-title {

white-space: nowrap;

}

Apart from the label styling... i would think about more configuration in Adv.Table template: - Do you really need EVERY info in the list view? Maybe set some infos to show in article full view only?! You can excluse certain fields in template config. Or in fields parameters. - the PDF attachment could be UNDER the title. This is another cool option for ALL fields in this template. - You could also turn off the HEADER labels for certain fields. Might result in overlapping or some other issues. But worth a try.

Great information! thanks so much for helping a rookie..

In looking at this, it seems a little odd that the submission form functions perfectly, but the full article view doesn't and clips the labels. Why can't they both use the same (or very similar) CSS?

Yes, your memory is correct on the CSS. It seems like the best solution would be for the form and article to match.

The main difference is that the form wraps the label name and the article truncates it.