5.20 Improvement Request

[WilliaFr]

Dear Ahmad, I'm loving the new release and am really happy with my testing of the new version.

I have already given someone advice in this forum about how to wrap text in responsive tables (via css) which could be an added as an option when defining the field (see http://forums.appgini.com/phpbb/viewtopic.php?f=2&t=830).

I have now discovered my own requirement / request.

Would it be possible when defining a field in a table that will have a url (usually very long) as it's content to request that the field have the css property word-break:break-all; so that the long url text is "wrapped" when displayed on narrow phone / tablet displays thus preserving the responsiveness of the design.

I have temporarily achieved this by adding

.url
{
word-break:break-all;
}

to the Slate css file

and

modifying the template so that the long url text appears between <p class="url"> .... </p> and will be split when the screen width reduces.

For example:

http://www.queensschoolrheindahlen.com/ ... /this_is_a very_long_url_textstring.html

would appear like

http://www.queensschoolrheindahle.com/respons
ive/this_is_a very_long_url_textstring.html

using the above method. Presently the field would not be split and would force the display width to remain at the length of the text.

Regards

Fred

[a.gneady]

Thanks Fred. Will implement your suggestion in the next release.

[sosapr]

SUBJECT: WORD WRAP IN TABLE VIEW

Hi Ahmad -

I just downloaded and installed 5.22 just hoping maybe the fields in the table view might wrap now.

I'm not comfortable enough with CSS to go in an play with it myself -- I would need detailed instructions ... put exactly what exactly where.

Looking forward, will this have to wait for a version 6 to be implemented? Is there a way I could make it happen?

Thanks, Mike

[sosapr]

Ahmad -

I've discovered the following post. I'll try it when I get home tonight. Meantime, does this look correct to you? Thanks.

...

Re: r 5.20
Unread postby WilliaFr » 29 Oct 2013, 09:01

Think I have found the solution.

The bootstrap css for responsive tables has the following:

@media (max-width: 768px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #dddddd;
}
.table-responsive > .table {
margin-bottom: 0;
background-color: #fff;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}

If you change "white-space: nowrap" to "white-space: wrap" I think you'll find that it does what you want.

[sosapr]

One more note --

I'm very hopeful I can have word wrap in tables with this edit, but I can't find the file that contains this code.

What folder / file is this in?

Thanks, Mike

[sosapr]

Okay, Found it! Will try it tonight!