Increase width of contcat label

[bespokeappstt]

I'm using the Concat Label functionality for a dbjoin. The data is just fine but it's a lot of data. How can I increase the width or force a 'wrap text'. It's affecting both the form and the List display. In the form all the data does not show as shown here.


In the list, some show and some done. You get some dots '...' to know that info is being clipped.

 

[lousyfool]

Can be done with (custom) CSS:
- In the form you can control the width of the field.
- In the list you can control if the text in the table cells is truncated (plus ellipsis, as per your screenshot) or wrapped into multiple lines.

If CSS isn't your strong suit, Google may be your friend alongside inspecting/simulating CSS in your browser console. Here it's just a guessing game, unless you post links to list and form.

 

[bespokeappstt]

Do you know the location I should place the 'custom.css' file? I'm doing this on localhost.

 

[troester]

http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/#the-custom-css-file
http://fabrikar.com/forums/index.ph...mplate/#custom-css-in-existing-list-templates

 

[bespokeappstt]

Thanks you for the links. I'm comfortable with CSS and will explore it. Having said that can I perform any kind of html in the concat syntax? Html or php? I'm thinking of simply inserting a new line character, I'll still need the CSS but being able to insert php or html for a carriage return or new line would be great.

 

[troester]

It's a MySQL concat, you can concatenate any text.
But I'm not sure how/if a HTML select will render such characters in form view.

 

[juuser]

E.g. {thistable}.element1,'<br>', {thistable}.element2 works for line break in list and details view, but not in editable elements (form view).

In form view you can either make the element wide enought with css or use text-overflow: ellipsis; etc to cut the text and add ... in the end.

 

[bespokeappstt]

To implement CSS I did the following:

1. copy and pasted the components/com_fabrik/views/form/tmpl/bootstrap/custom_css_example.php to components/com_fabrik/views/form/tmpl/protostar/custom_css.php
2. inserted the following css:

   td.a_clearence___vendorpo fabrik_element{
   word-wrap: normal;
   width: 30%;

No change at all. Did I miss something? I am using prototstar template.


Restarted apache.

 

[bespokeappstt]

For the form, I edited the same custom_css.php with:

#a_clearence___vendorpo{
width: 40%;
}

This is the inspect element:

 

[juuser]

For the list the folder is components/com_fabrik/views/list/tmpl/bootstrap

And you need something like:

.a_clearence___vendorpo .fabrikRepeatData > li {

   white-space: nowrap;
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
}

Adjust the pixel value according to your need.

 

[juuser]

For the form, make sure your css is actually applied (check in browser console css part). You may need to use e.g. "width: 40%!important;"

 

[troester]

copy and pasted the components/com_fabrik/views/form/tmpl/bootstrap/custom_css_example.php to components/com_fabrik/views/form/tmpl/protostar/custom_css.php

No, custom_css.php is only for Fabrik templates (it can handle dynamically row ids, url params etc), not for Joomla templates. You can add (static) Fabrik classes to Joomla template CSS, it depends on the J! template where you can put it, but these are .css files, not .php files.

Use your browser inspector to see
which sources are loaded at all
what is the CSS applied to your class in the end (it's "cascading"...)

e.g. width:40% is related to the parent element, so (if it's applied at all) it's only 40% of the original with

 

[bespokeappstt]

I have placed the custom custom_css.php file in the location

/var/www/html/scott/components/com_fabrik/views/form/tmpl/bootstrap

And used the css as provided by juser. The form looks fine. The list however is unresponsive. No change at all no matter what values I use. The '<br />' in the concat works and that's fine. But I would like to be able to manipulate the CSS for the list view. I can manipulate the CSS for the form view, so the form is covered but now I need to get a grip on the list. This is what the file looks like:


With a whopping 600px there is no chnage on the front end:

 

[juuser]

Again, for the list the custom css file location is: /components/com_fabrik/views/list/tmpl/bootstrap

And set the pixel value rather smaller for testing. If your actual content is not wider than 600px, you will not see any changes.

 

[bespokeappstt]

Okay yes, I missed that. Thanks. Everything works just fine now.
SOLVED.