Responsive text table column
Moderators: Jon, Steve, Ian, Dave
-
- Ebase User
- Posts: 86
- Joined: Thu Mar 08, 2018 2:52 pm
Responsive text table column
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
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Re: Responsive text table column
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
-
- Ebase User
- Posts: 86
- Joined: Thu Mar 08, 2018 2:52 pm
Re: Responsive text table column
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.
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.
0 x
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Re: Responsive text table column
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.fronsky wrote: ↑Tue Jul 31, 2018 12:43 pmThank 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.
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
-
- Ebase User
- Posts: 86
- Joined: Thu Mar 08, 2018 2:52 pm
Re: Responsive text table column
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.
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
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Re: Responsive text table column
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%.fronsky wrote: ↑Tue Jul 31, 2018 2:24 pmNot 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.
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
-
- Ebase User
- Posts: 86
- Joined: Thu Mar 08, 2018 2:52 pm
Re: Responsive text table column
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.
0 x
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Re: Responsive text table column
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
-
- Ebase User
- Posts: 86
- Joined: Thu Mar 08, 2018 2:52 pm
- jcoulson
- Ebase User
- Posts: 30
- Joined: Tue Sep 24, 2013 10:18 am
- Location: Sandy, UK
- Contact:
Re: Responsive text table column
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
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
-
- Ebase User
- Posts: 86
- Joined: Thu Mar 08, 2018 2:52 pm
Who is online
Users browsing this forum: No registered users and 8 guests