Jump to content
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

Share this post


Link to post
Share on other sites
<td class="col-sm-3" style="word-break: normal;">

 

Share this post


Link to post
Share on other sites

Sorry that pushes the text into one line and the table off screen again as above.
The text-break is the only way I've found so far to keep the table to mobile screen width.

Share this post


Link to post
Share on other sites

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.

Edited by Heatherbell

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

Edited by peterpil19

PROUDLY PASSIONATE PHOENIX SUPPORTER

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

Join the Phoenix Club. Become a Phoenix Supporter.  Gain access to special codes and modules and help the project thrive. Read 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 👍

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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×