kentster VIP
Total posts: 54
10 Фев 2014 08:48

I am creating a questionnaire form with long questions, like a 10 word sentence. The questions are getting clipped off on the full forms and on the list display they are stretching off the list the edge of the browser with no wrapping. I know that I can do custom templates, but before I dive into that I was wondering if there is a better solution. I noticed on the full paid version of Cobalt that I have some better forms, but still not ideal. My ideal is to have them wrap the text on both the form and list.

Kent

Последние изменения: 02 Март 2014


pepperstreet VIP
Total posts: 3,837
10 Фев 2014 13:02

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?


kentster VIP
Total posts: 54
10 Фев 2014 15:42

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

Thanks,

Kent


kentster VIP
Total posts: 54
10 Фев 2014 15:45

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.


Sergey
Total posts: 13,748
11 Фев 2014 07:48

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


pepperstreet VIP
Total posts: 3,837
11 Фев 2014 13:44

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.


kentster VIP
Total posts: 54
11 Фев 2014 16:47

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


kentster VIP
Total posts: 54
16 Фев 2014 11:05

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?


kentster VIP
Total posts: 54
17 Фев 2014 19:41

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


kentster VIP
Total posts: 54
17 Фев 2014 19:43

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

Работает на Cobalt