Responsive text table column

Post any questions you have about using the Verj.io Studio, including client and server-side programming with Javascript or FPL, and integration with databases, web services etc.

Moderators: Jon, Steve, Ian, Dave

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Responsive text table column

#1

Postby fronsky » Tue Jul 31, 2018 8:10 am

I have a large text table column which I want to be responsive, just like the text in the bootstrapFields example. For some reason I can't get it to work. Has anyone been succesfull in implementing this and can help with an example?
0 x

User avatar
jcoulson
Ebase User
Posts: 30
Joined: Tue Sep 24, 2013 10:18 am
Location: Sandy, UK
Contact:

Re: Responsive text table column

#2

Postby jcoulson » Tue Jul 31, 2018 11:48 am

fronsky wrote:
Tue Jul 31, 2018 8:10 am
I have a large text table column which I want to be responsive, just like the text in the bootstrapFields example. For some reason I can't get it to work. Has anyone been succesfull in implementing this and can help with an example?
I have looked at the Bootstrap Fields example and am struggling to figure out quite what you are trying to achieve in relation to a table.
If possible could you provide a screenshot of the problem (or desired solution) so I can figure out what needs changing.

Many thanks,

Jordan
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: Responsive text table column

#3

Postby fronsky » Tue Jul 31, 2018 12:43 pm

Thank you for your quick reply. In my testform the column field display type is text and display length is default (30). The field doesn't expand or shrink when changing the browser view.

The bootstrap example does adapt itself. See image parts 1&2.

Another nice feature for handling long text fields would be like in the other two images.
A third option would be to have a scroll barr appear when the view is to small to show all when the screen is too small.


Image
0 x

User avatar
jcoulson
Ebase User
Posts: 30
Joined: Tue Sep 24, 2013 10:18 am
Location: Sandy, UK
Contact:

Re: Responsive text table column

#4

Postby jcoulson » Tue Jul 31, 2018 1:27 pm

fronsky wrote:
Tue Jul 31, 2018 12:43 pm
Thank you for your quick reply. In my testform the column field display type is text and display length is default (30). The field doesn't expand or shrimps when changing the browser view.

The bootstrap example does adapt itself. See image parts 1&2.

Another nice feature for handling long text fields would be like in the other two images.
A third option would be to have a scroll barr appear when the view is to small to show all when the screen is too small.


Image
How the table responds will also depend on how other table elements are styled, for example the table control width, or the individual table column control width. The do not work independently as a field can.

It is hard to convey in words exactly what you are trying to achieve but I think you may be able to get somewhere nearer what you are after by adding the class table to the table control and putting your table control inside a panel with the class table-responsive

Let me know how you get on with this or if I as still misunderstanding.

Kind Regards,

Jordan
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: Responsive text table column

#5

Postby fronsky » Tue Jul 31, 2018 2:24 pm

Not the required effect. I added fresh/new property sets for the two controls. But behaviour of the text column is the same.

It's a very basic form and the panel around the table control is on 'root' level. Can't I get it to autowidth through some setting. I tried class w-auto, but doesn't seem to work.
0 x

User avatar
jcoulson
Ebase User
Posts: 30
Joined: Tue Sep 24, 2013 10:18 am
Location: Sandy, UK
Contact:

Re: Responsive text table column

#6

Postby jcoulson » Tue Jul 31, 2018 2:39 pm

fronsky wrote:
Tue Jul 31, 2018 2:24 pm
Not the required effect. I added fresh/new property sets for the two controls. But behaviour of the text column is the same.

It's a very basic form and the panel around the table control is on 'root' level. Can't I get it to autowidth through some setting. I tried class w-auto, but doesn't seem to work.
I think I am following. Please try adding class container-fluid to the root element and then in the table styling assistant set the table control width to 100%.

This will mean the table fills the entire page width.

Let me know if this is not what you are after.

Kind Regards,

Jordan
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: Responsive text table column

#7

Postby fronsky » Tue Jul 31, 2018 2:55 pm

:(

I must be doing something wrong. I already had set the table control width to 100%. Added the container-fluid. But still showing two fields of approx. 30 chars wide.


Image
0 x

User avatar
jcoulson
Ebase User
Posts: 30
Joined: Tue Sep 24, 2013 10:18 am
Location: Sandy, UK
Contact:

Re: Responsive text table column

#8

Postby jcoulson » Tue Jul 31, 2018 3:55 pm

fronsky wrote:
Tue Jul 31, 2018 2:55 pm
:(

I must be doing something wrong. I already had set the table control width to 100%. Added the container-fluid. But still showing two fields of approx. 30 chars wide.


Image
This is hard to debug without being in front of it. If possible are you able to export your test form to a zip archive and send it to jordan.coulson@ebasetech.com and I will import it locally and take a look.

Many thanks,

Jordan
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: Responsive text table column

#9

Postby fronsky » Tue Jul 31, 2018 6:53 pm

I have sent you an export. Many thanks!
0 x

User avatar
jcoulson
Ebase User
Posts: 30
Joined: Tue Sep 24, 2013 10:18 am
Location: Sandy, UK
Contact:

Re: Responsive text table column

#10

Postby jcoulson » Thu Aug 02, 2018 8:21 am

Just so those that are reading are aware of the solution for responsive tables that have editable columns I will post some pointer below:

1. Make the table control 100% width and add the class table to it
2. Your table control should be inside a panel with class table-responsive
3. The above panel should be inside another panel with class container-fluid
4. Add the class form-control to both the table column controls in the editor tab of the html element properties window
5. Set the display length of any long text field to a large number such as 150 (this should be set to the maximum length you want the field to get to on full screen)
6. In each table column control styling assistant window set their width as percentages of how much of the table you wish for them to take up

Hope this helps

Jordan
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: Responsive text table column

#11

Postby fronsky » Fri Aug 03, 2018 11:18 am

Thanks again for yr great support. It works!
1 x


Who is online

Users browsing this forum: No registered users and 12 guests