General help

Issues with Responsive Tables in Moodle 2.6

 
 
Picture of Geoff Wildbur
Issues with Responsive Tables in Moodle 2.6
 

In a previous post I found what I thought were some solutions to help with making my tables more responsive using the following changes to my html code:


Tables - table-layout: fixed; width: 100%;

also any <td references to width must be set to 100%


Images - max-width: 90%; min-width: 35%; height: auto;


If using JWPlayer and you want the player to be responsive use the following:

        width: '100%',
        aspectratio: "16:7"     the aspect ratio can be anything you want 16:7 works for me


What I have found is that the tables indeed are responsive however the images and JWPlayer players are huge when viewed on the desktop. The display beautifully on phone and tablets but are huge on a large desktop monitor. I am currently using the Clean theme.

Is there anything I can do to reduce the size on my desktop. I have included a couple of screenshots so that you can get an idea of what I mean.


Any help would be greatly appreciated



 
Average of ratings: -
Picture of Alan Ball
Re: Issues with Responsive Tables in Moodle 2.6
 

It's doing exactly as you've told it: max-width: 90%;

It's not responsive as much as fluid - it will maintain that max-width regardless of the size of the table. (min-width is actually ignored here)

If you want to target a different max-width for devices, you'll be better off using CSS media queries. There's some common breakpoints here: http://css-tricks.com/css-media-queries/


edit: just caught up on your previous post in another thread. I suggest defining a few classes eg:

.smallimage { max-width: 50%; }

.largeimage { max-width:90%; } 

etc.. so in your html view when editing you can just add class="largeimage" (or smallimage or whatever) to the <img> tag.

Then do the media queries for different devices if needed.

eg for iphone it would be something like:

@media only screen and (max-width : 320px)
{
.largeimage { max-width:60%; }
}

 
Average of ratings: -
Picture of Geoff Wildbur
Re: Issues with Responsive Tables in Moodle 2.6
 

Hi Allan,


Thanks for your responses. Much appreciated. it seems that there are times when it is simply enough to post my questions and then answers seem to flow. Here is what I did:

On most of my pages I have a title table followed by a set of nested tables. So what I did is the following.

For the first table I set the width to 100% using -  table-layout: fixed; width: 100%;

For the first nested table I set the width at 100% and for all the remaining tables I set the width to 85% using table-layout: fixed; width: 100%; . Any <td widths were set to 100% and any hard coded widths removed in favor of the % widths.

All text in the tables was left justified.

All images inside the tables were set to the actual sizes required. Interestingly the images scaled down quite well as the tables did. This saved a lot of extra coding.

The result is attached below. I also have shown below some sample html I used.

It seems to work well. The pages now scale down to an iPhone. Just took a lot of trial and error. LOL


HTML Code

NOTE: I have removed the actual links but yu can see how the page actually resizes without the actual images being there.

<table rules="none" frame="void" style="table-layout: fixed; width: 100%; border: 4px double #000000; float: none; background-image: none; vertical-align: middle; color: #ffffcc; background-color: #666666; text-align: center; font-family: arial,helvetica,sans-serif;" align="middle" border="1" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="top" width="100%"><span style="font-size: x-large;" size="5">Bringing Darkness to Light</span></td>
</tr>
</tbody>
</table>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: medium;" size="3"> </span></p>
<table rules="none" frame="void" style="table-layout: fixed; width: 100%; border: 4px double #000033; float: none; background-image: none; vertical-align: middle; background-color: #666666; text-align: center; font-family: arial,helvetica,sans-serif;" align="middle" border="4" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="top" width="100%"><span style="font-size: medium;" size="3"><br /></span>
<table rules="none" frame="void" style="table-layout: fixed; width: 85%; border: 4px solid #000000; float: none; background-image: none; margin-left: auto; vertical-align: middle; color: #000000; margin-right: auto; background-color: #ffffcc; text-align: left;" border="4" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="top" width="100%"><br /><span style="font-size: medium;" size="3"> </span>
<table rules="none" frame="void" style="table-layout: fixed; width: 85%; border: 4px solid #000033; float: none; background-image: none; margin-left: auto; vertical-align: middle; color: #333366; margin-right: auto; background-color: #ccccff; text-align: left; height: 36px;" border="4" cellpadding="20" cellspacing="20">
<tbody>
<tr>
<td style="text-align: center;" valign="top" width="100%">
<div style="color: #000033; text-align: center;"><span style="font-size: medium;" size="3"><img style="max-width: 100%; min-width: 35%; height: auto; vertical-align: middle; margin-top: 6px; margin-bottom: 6px;" title="light burst" alt="light burst" src="http://media/mmt/video/images/lightburst1.png" /><br /><br /></span>Awakening is about letting go of blocks.</div>
<div style="text-align: left;"><br />
<div>There is no path other than to undo or unlearn. This is True Learning. This is not meant to be another course or program designed to teach something. It is not meant to be used to accumulate worldly knowledge or become a better student. It is designed to provide temporary, helpful tools to expose the belief in separation (the ego) and allow it to be gently let go. There are no secret techniques or magic passwords, and there is certainly not a "missing key" to understand the Course and instantly wake up. There is an immediacy to salvation and it is available now but it is all about letting the fears surface and be released. This provides a relaxation like never before. This program will help facilitate a joyful journey home and fast-track the "Art of Awakening."<br /><br /></div>
</div>
</td>
</tr>
</tbody>
</table>
<table rules="none" frame="void" style="table-layout: fixed; width: 85%; border: 4px solid #000033; float: none; background-image: none; margin-left: auto; vertical-align: middle; color: #ccccff; margin-right: auto; background-color: #333366; text-align: left; height: 36px;" border="4" cellpadding="20" cellspacing="20">
<tbody>
<tr>
<td style="text-align: center;" valign="top" width="100%">
<div style="text-align: left;">In the following clip, Penelope Chatterton interviews Enlightened Teacher David Hoffmeister about the teachings of A Course in Miracles. David speaks about the essential teaching that you are not a body or in a body, and that this path is about bringing the darkness to the light.</div>
<div style="text-align: center;">Click Play below to watch the clip <span style="font-style: italic;">"Penelope Chat Interview Part 6"</span></div>
<br />
<div style="text-align: left;">
<div id="chat"></div>
<script type="text/javascript">// <![CDATA[
jwplayer('chat').setup({
        file: 'http://media/mmt/video/content/penelope_chat_interview_part_6.mp4',
        image: 'http://media/mmt/video/images/penelopedavid.jpg',
        title: 'Penelope Chatterton Interview',
        width: '100%',
        aspectratio: "16:7"
    });
// ]]></script>
</div>
</td>
</tr>
</tbody>
</table>
<table rules="none" frame="void" style="table-layout: fixed; width: 100%; border: 0px solid #000000; float: none; background-image: none; margin-left: auto; vertical-align: middle; color: #000000; margin-right: auto; background-color: #ffffcc; text-align: left; height: 36px;" border="4" cellspacing="5">
<tbody>
<tr>
<td style="text-align: left;" valign="top" width="100%">
<div style="text-align: right;"></div>
<br />
<div style="text-align: center;"><span style="color: black;">When you are ready, continue to the next page for 'A Crash Course in Miracles'.</span></div>
</td>
</tr>
</tbody>
</table>
<br />
<div style="text-align: center;">
<div style="text-align: center;"></div>
</div>
<span style="font-size: medium;" size="3"><span style="font-size: medium;" size="3"></span> </span></td>
</tr>
</tbody>
</table>
<span style="font-size: medium;" size="3"><br /><br /></span></td>
</tr>
</tbody>
</table>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: medium;" size="3"><br /><br /><br /><br /><br /></span></p>







 
Average of ratings: -