• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Overlaping column - Form elements

Status
Not open for further replies.

jo-ka

Member
Hello.

I have a form (group) with 3 columns on edit record.
Is there a way, probably with css modification, that one element can overlap the 3 columns, like the screenshots?

NOW:
upload_2017-6-2_8-54-30.png

EXPECTED:
upload_2017-6-2_9-0-11.png

Thanks in advance.
 

Attachments

  • upload_2017-6-1_11-19-28.png
    upload_2017-6-1_11-19-28.png
    15.6 KB · Views: 45
  • upload_2017-6-1_11-20-12.png
    upload_2017-6-1_11-20-12.png
    1.3 KB · Views: 45
  • upload_2017-6-2_8-59-10.png
    upload_2017-6-2_8-59-10.png
    9.3 KB · Views: 44
Easiest way (as long as you don't use the bootstrap_tabs template) would be one extra group (with empty label) for the textarea.
 
Dear Troester,

It's a long time I've asked this, and your solution was perfect for this need.

Now, I've come to a situation where I need to have tabbed form (bootstrap_tab) and also need to have the same situation, this is, 2 columns form and some elements using one column only, overlapping the second.
Is this possible?

Thanks in advance.
 
You can keep it as it is. But the Fabrik bootstrap_tabs is creating a tab for every group.
So if you need your textarea in the same tab with other elements it has to be in the same group and you have to add custom CSS to force it's width.
Something like
#{$form} .fb_el_your___element {width:100%;margin-left:0;}
 
You can keep it as it is. But the Fabrik bootstrap_tabs is creating a tab for every group.
So if you need your textarea in the same tab with other elements it has to be in the same group and you have to add custom CSS to force it's width.
Something like
#{$form} .fb_el_your___element {width:100%;margin-left:0;}

Dear troester,

I've tried this on my form custom.css

#{$form} .fab_tickets___ProblemDescription {
width:100%;
margin-left:0;
}

But it didn't worked. Did I made everything correctly?
 
The container class has fb_el_ prefix.
So try
#{$form} .fb_el_fab_tickets___ProblemDescription

For CSS stuff use your browser dev tool (usually a right click and something like "inspect element") to see which exact classes/HTML ids are needed (and to test on the fly).
 
OK, thanks.

After changing the prefix, the element has grown to 100%, but only on the first column. My idea is to make it go trough both columns, using the bootstrap tabs...

Is there a way?
 
No, it won't work.

And I was using Dev tools and couldn't find a way either...

Any other suggestion?
 
Yes, I can see "your-site" infos.
So which site, which form, which menu to get the form?
 
Dear troester,
SO I've made the changes in my custom.css file and set the field with display to span12.

With this, the next elements remain on first column, and don't go trough the remaining columns.

Is there a way to define, for example with 4 columns, if element X is on column 1, element Y on column 4, besides the ordering the elements?

Thanks in advance.
 
Rather than sending PMs, it helps if you put details in your My Sites, so I can see them.

-- hugh
Hello. The details are published on my sites. I just didn't want to make the site public... sorry for that.

But the site is the one which starts with Support.

Thanks
 
... Please check fab_tickets___ProblemDescription element, wich I've changed the custom.css as this:

#{$form} .fb_el_fab_tickets___ProblemDescription {
width:49%;
margin-left:20px;
}

so it can overlap from column 3 to 4.

Then, fab_tickets___ServiceOrderYesNo goes under fab_tickets___ProblemDescription element on column 3 and not to column 1 as expected (I expect).

This fab_tickets___ServiceOrderYesNo element have some JS plugins that show and hide other 2 elements, based on this value and these 2, after shown, goes correctly to column 1 and 2.

It looks like fab_tickets___ServiceOrderYesNo doesn't take in consideration the change in custom.css...

Thanks in advance.
 
Status
Not open for further replies.
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top