I am using "Collapsed Topics". I have noticed that the topic headings do not wrap words properly. It happens in different themes, too.
Is there any CSS code that can be added to fix this problem?
Here is a picture showing the problem.
Thanks (Gareth).
Hi Rick,
Firstly, unfortunately, this post really belongs in the 'Courses and course formats' and not 'Themes' forum.
What version of CT are you using? There are new CSS attributes that can help with this, 'text-overflow' and 'word-wrap', both of which need to be specified for compatibility: http://caniuse.com/#feat=text-overflow. Then its a mater of fixing it in the right place. Need a little time.
Gareth
Moving...hold on to your hats...
I am working with Moodle 2.7, but the problem goes back at least to my production 2.6.3, and probably even earlier. I looked at version.php in .../topcol/, and am seeing the following:
$plugin->version = 2014052000;
$plugin->maturity = MATURITY_STABLE;
$plugin->requires = 2014051200.00; // 2.7 (Build: 20140512).
$plugin->component = 'format_topcoll';
$plugin->release = '2.7.1';
I will see if I can add the CSS code for text-overflow to force a change.
Thanks.
Gareth,
Here is the CSS code that I added to fix this problem. There may be a cleaner way, but this works in both 2.6.3 and 2.7 (Formal White and MORE, respectively.)
.course-content ul.ctopics li.section .content .toggle a h3.sectionname {
word-break: normal;
}
I discovered an odd thing with the CSS code that I provided. In MORE (2.7), on the computer screen, this code works fine, even when I make my browser windows (Safari or Firefox) very narrow. But on my iPhone (Safari), this code does not work! So is there somewhere else that I need to apply this word-break: normal revision? Somehow, I thought it would work across all devices.
Hi Rick,
Please could you try the CSS attribute changes in 'styles.css' on https://github.com/gjb2048/moodle-format_topcoll/commit/5628a480c3e4567e53e0d70dcf0ee9a0b0a741bd. This should cover all devices as it uses different attributes for the same thing but with varying levels of browser support.
Cheers,
Gareth
Gareth,
I looked at your suggested code in your styles.css, and I think that I discovered that you might be using some incorrect arguments for these CSS styles.
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
You were able to cause me to explore these CSS properties, and I discovered the correct arguments and came upon a solution that works in Safari, Chrome, IE11, Firefox, and Safari on my iPhone. I put this code in the CSS box of MORE (2.7), and it worked. I am not sure if you would want to integrate these changes in CT styles.css. By the way, apparently word-wrap might now be superseded by overflow-wrap, so having both in here might be redundant. I am not sure about this, so I am including both.
.course-content ul.ctopics li.section .content .toggle a h3,
.course-content ul.ctopics li.section .content.sectionhidden h3 {
word-wrap: normal;
overflow-wrap: normal;
word-break: normal;
}
Hi Rick,
I decided on 'break-word' because it seemed to be more appropriate in testing: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp.
overflow-wrap has indeed superseded word-wrap, but not all browsers support it which is why it is there: http://caniuse.com/#search=overflow-wrap
Cheers,
Gareth
Okay, I think that I understand your logic. But somehow, when I used break-word, that's what happened, words got truncated (broken) and put on the next line. I am finding that I prefer not to break words, and had better success with "normal".