Jump to content

Archived

This topic is now archived and is closed to further replies.

Heatherbell

Help with code in table

Recommended Posts

Trying to stop the words breaking mid-word here in a table in mobile view - grateful for any advice.
I added the text-break (which is probably wrong) but without it the table doesn't shrink to fit screen width
Using this code on the left column:
 echo '<td class="col-sm-3 text-break">
gives:

Untitled33.png.4a5ad5373ea5bef2b9f09f37b73d6be7.png


Download the latest CE Phoenix version here:
https://github.com/gburton/CE-Phoenix/archive/master.zip

Share this post


Link to post
Share on other sites

Share this post


Link to post
Share on other sites

Check this resource:

https://stackoverflow.com/questions/42232954/bootstrap-4-word-wrapping-in-cards

I used this long ago and it seems bootstrap has it's own css to manage this.

Share this post


Link to post
Share on other sites

Sorry neither suggestion works in this instance.
Have previously spent ages on stackoverrflow and w3schools trying suggestions just to get the product name to wrap so table shrinks to screen width but cannot find the fix for the broken words.


Download the latest CE Phoenix version here:
https://github.com/gburton/CE-Phoenix/archive/master.zip

Share this post


Link to post
Share on other sites

Hi,

Potentially a dumb question, but do you need to use tables? Could you use bootstrap list groups or something else?

Peter


CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Share this post


Link to post
Share on other sites

@peterpil19
At this stage I'll give anything a go! Spent too much time on it already for what it's worth but has now just become a challenge!
I'm trying to update an old mod - have got it working on Phoenix now, just that niggly format issue to solve - it was coded with a table so have been working with that but probably, as you suggest, time for a rethink 👍


Download the latest CE Phoenix version here:
https://github.com/gburton/CE-Phoenix/archive/master.zip

Share this post


Link to post
Share on other sites

If you can't get the table to play nicely...

Grid Layout;

<div class="row">
  <-- each -->
  <div class="col-10">
    lots of text
  </div>
  <div class="col-2">
    price
  </div>
  <!-- eof each -->
</div>

List Group;

<ul class="list-group">
  <-- each -->
  <li class="list-group-item d-flex justify-content-between align-items-center">
    lots of text
    <span>price</span>
  </li>
  <!-- eof each -->
</ul>

Of the two, the list group is less code and a bit nicer to play with.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

Boostrap 4 responsive tables work fine on mobile screens, you just need to produce the correct html. Stock BS table table-borderless class with no aditional css required. Text is fully responsive and wraps without any issues.

image.png.cf639c36cb8b0e529403f1d83ace196c.png


 

Share this post


Link to post
Share on other sites

×