Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Table Responsive Delima

I know you guys must get tired of my piece-meal efforts to understand v9. I'm sorry but I need to know how to re-code things to conform to the new deal. I have tried to apply table-responsive to my infusion but this is what I'm getting. This 1st screen is full width:

This next image is when I reduce the screen to a smaller size to test table-responsive:
Notice the functional scroll-bar at the bottom.

And this is my code:
            echo "<div class='table-responsive'><table class='table table-striped'><tr>\n";
            echo "<td colspan='2' align='center'><img class='img-responsive' src='".($data['book_image'] ? IMAGES_BOOK.$data['book_image'] : INFUSIONS."booklib/images/default.png")."' alt='".$data['book_title']."' />\n";
            if ($asettings['social_sharing']) {
               echo "<br /><div colspan='2' style='text-align:center'>\n";
               $link = $settings['siteurl'].str_replace("../","",INFUSIONS)."booklib/book.php?book_id=".$_GET['book_id'];
               echo "<a href='http://www.facebook.com/share.php?u=".$link."' target='_blank'><img alt='Facebook' src='".INFUSIONS."booklib/images/facebook.png' border='0'></a>&nbsp;\n";
               echo "<a href='http://twitter.com/share?url=".$link."' target='_blank'><img alt='Twitter' src='".INFUSIONS."booklib/images/twitter.png' border='0'></a>&nbsp;\n";
               echo "<a href='http://digg.com/submit?url=".$link."' target='_blank'><img alt='Digg' src='".INFUSIONS."booklib/images/digg.png' border='0'></a>&nbsp;\n";
               echo "<a href='http://reddit.com/submit?url=".$link."' target='_blank'><img alt='Reddit' src='".INFUSIONS."booklib/images/reddit.png' border='0'></a>&nbsp;\n";
               echo "<a href='http://del.icio.us/post?url=".$link."' target='_blank'><img alt='Del.icio.us' src='".INFUSIONS."booklib/images/delicious.png' border='0'></a>&nbsp;\n";
               echo "</div>\n";
            echo "</td></tr><tr>\n";
            echo "<td>".$locale['book_411'].":</td>\n";
            $new = "";
            if ($data['book_datestamp'] + 604800 > time() + (date_default_timezone_set($settings['default_timezone']) * 3600)) {
               $new = "<span class='small'>".$locale['book_410']."</span>";
            echo "<td>".$data['book_title']."&nbsp;".$new."</td>\n";
            echo "</tr><tr>\n";
            echo "<td>".$locale['book_417'].":</td>\n";
            echo "<td>".($data['book_author'] ? $data['book_author'] : "-")."</td>\n";
            echo "</tr><tr>\n";
            echo "<td>".$locale['book_413'].":</td>\n";
            echo "<td>".cat_parents($data['book_cat'])."</td>\n";
            if ($data['book_pubdate']) {
               echo "</tr><tr>\n";
               echo "<td>".$locale['book_419'].":</td>\n";
               echo "<td>".$data['book_pubdate']."</td>\n";
            if ($data['book_publisher']) {
               echo "</tr><tr>\n";
               echo "<td>".$locale['book_415'].":</td>\n";
               echo "<td>".$data['book_publisher']."</td>\n";
            if ($data['book_language']) {
               echo "</tr><tr>\n";
               echo "<td>".$locale['book_436'].":</td>\n";
               echo "<td>".$data['book_language']."</td>\n";
            if ($data['book_format']) {
               echo "</tr><tr>\n";
               echo "<td>".$locale['book_438'].":</td>\n";
               echo "<td>".$data['book_format']."</td>\n";
            echo "</tr><tr>\n";
            echo "<td>".$locale['book_422'].":</td>\n";
            echo "<td>".($data['book_filesize'] ? $data['book_filesize'] : "-")."</td>\n";
            echo "</tr><tr>\n";
            echo "<td>".$locale['book_418'].":</td>\n";
            $drating = dbarray(dbquery("SELECT SUM(rating_vote) sum_rating, COUNT(rating_item_id) count_votes FROM ".DB_RATINGS." WHERE rating_item_id='".$data['book_id']."' AND rating_type='B'"));
            $num_votes = $drating['count_votes'];
            $rating = ($num_votes > 0 ? str_repeat("<img src='".INFUSIONS."booklib/images/star.png'>",ceil($drating['sum_rating']/$num_votes))." [".$locale['book_428'].": ".$num_votes."]" : $locale['book_429']);
            echo "<td>".$rating."</td>\n";
            echo "</tr><tr>\n";
            echo "<td>".$locale['book_424'].":</td>\n";
            echo "<td><a href='".FUSION_SELF."?book_id=".$data['book_id']."&amp;action=download'>".$locale['book_416']."</a> [".$data['book_count']."] ".(!$can_download ? "<span style='color:#f00'>".$locale['book_432']."</span>" : "")."</td>\n";
            echo "</tr><tr>\n";
            if ($asettings['read_epub'] && ($data['book_format'] =="EPUB")) {
            echo "<td>".$locale['book_443'].":</td>\n";
            echo "<td><a href='".INFUSIONS."booklib/ereader/".$data['book_title'].".php' target='_blank'>".$locale['book_439']."</a></td>\n";
            } elseif ($data['book_format'] =="PDF") {
            echo "<td>".$locale['book_443'].":</td>\n";
            echo "<td><a href='".INFUSIONS."booklib/downloads/".$data['book_file']."' target='_blank'>".$locale['book_445']."</a></td>\n";
            } else {
            echo "<td>".$locale['book_443'].":</td>\n";
            echo "<td>".$locale['book_444']."</td>\n";
            echo "</tr><tr>\n";
            if ($data['book_description']) {
            echo "<td colspan='2' class='tbl2'><b>".$locale['book_423'].":</b></td>\n";
            echo "</tr><tr>\n";
            echo "<td colspan='2'>".html_entity_decode(parseubb(parsesmileys($data['book_description'])))."</td>\n";
            echo "</tr><tr>\n";
            echo "<td colspan='2' class='tbl'><b>".$locale['book_433']."</b>&nbsp;".profile_link($data['user_id'], $data['user_name'], $data['user_status'])."<br /><b>".$locale['book_437']."</b>&nbsp;".showdate("shortdate", $data['book_datestamp'])."</td>\n";
            echo "</tr></table></div>\n";

Please someone help me to understand what I am doing wrong!
I would take the grid system from bootstrap. Would that be a solution for you?

tocrah wrote:

@tocrah - I would take the grid system from bootstrap. Would that be a solution for you?

Sure that would probably be a solution if I knew how to apply the coding to my infusion. I am a table person and don't use divs and really have a hard time understanding how to use divs. I suppose one day I'll figure it out if I live that long! LOL grin
This is a browser width of 752. If I drag the window even slightly smaller then the description field jumps back to straight across with no auto-flow:

I cannot figure out how to make it continue to flow left at lower widths.
Chan attached the following image:
Well I solved the description heading and field problem by taking it completely out of the table and putting it in a div with class='post_message'. It works fine. I need to learn more div techniques anyway.
Well I finally have my first successful complete conversion of a table setup to the responsive div setup. Making progress! cool
Thread Information
7 posts
480 times
Last Post
Last updated on 9 months ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Chan, tocrah, Grimloch