{"id":53059,"date":"2021-08-19T03:01:11","date_gmt":"2021-08-18T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53059"},"modified":"2021-08-20T20:07:28","modified_gmt":"2021-08-20T10:07:28","slug":"css-overflow-x-code-within-cell-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-overflow-x-code-within-cell-tutorial\/","title":{"rendered":"CSS Overflow-X Code Within Cell Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/td_code_overflow_visible.gif\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Overflow-X Code Within Cell Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/td_code_overflow_visible.gif\" title=\"CSS Overflow-X Code Within Cell Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Overflow-X Code Within Cell Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s  <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-youtube-video-search-event-timing-tutorial\/'>Karaoke YouTube Video Search Event Timing Tutorial<\/a> blog posting&#8217;s presentation (ie. its &#8220;look&#8221;), at least earlier on today had some of its priorities out of skew.  It was a blog post trying to get the reader to examine &#8220;the code&#8221; of that YouTube Embedded Iframe API event scenario.  In other words &#8220;the code&#8221; (in HTML <i>code<\/i> tags) was the &#8220;main game&#8221;.  But up the top of the blog post, earlier on today, those topmost <i>code<\/i> element&#8217;s content could be cut off to the right depending on the width of your device (ie. laptops were wide enough, but tablets and phones were not).<\/p>\n<p>Can we fix it with Javascript?  Perhaps, but that is cracking a small nut with a giant hammer.  Can we fix it with CSS?  Yes, and what is the conservative, least controversial approach, and what concepts come into play?<\/p>\n<ul>\n<li>it&#8217;s a (CSS) <a target=_blank title='CSS overflow property info from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_pos_overflow.asp'><i>overflow<\/i><\/a> issue, and because it is &#8220;an out to the right&#8221; issue we are talking <i>overflow-x<\/i> issue &#8230; and &#8230;<\/li>\n<li>overflow issues are normally come upon, successfully, in CSS, when you apply the styling to the nester element of some nested element whose content is overflowing the dimensions (in this case &#8220;width&#8221;) of the nester element &#8230;<\/li>\n<li>honing in on the particular styling selector of interest in that the particular issue has occurred in a table cell (<i>td<\/i>) nesting a <i>code<\/i> element &#8230; so let&#8217;s try to CSS style just in that specific way (ie. the conservative approach) &#8230;<\/li>\n<li>we thank <a target=_blank title='Useful link, thanks' href='https:\/\/sabe.io\/classes\/css\/grouping-nesting-selectors'>this link<\/a> for the heads up on CSS selectors for nesting (ie. Descendant Selector) syntax &#8230; a bit like falling off a log really &#8230;<br \/>\nCSS &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n  td code { overflow-x: visible; }<br \/>\n&lt;\/style&gt;'<br \/>\n<\/code><br \/>\n &#8230; or inline within HTML &#8230;<br \/>\n<code><br \/>\n&lt;table&gt;&lt;tr&gt;&lt;td style=\"overflow-x: visible;\"&gt;&lt;code&gt; blah blah blah&lt;\/code&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/td_code_overflow_visible.gif\" title=\"Click picture\">and practically what we did was<\/a> &#8230;\n<ol>\n<li>temporarily changed the topmost blog posting&#8217;s <i>code<\/i> element HTML to try that second idea above &#8230;<\/li>\n<li>tested the &#8220;look&#8221; of the blog posting and saw it being better while ones below were still annoying &#8230; check &#8230; so &#8230; undid that, then &#8230;<\/li>\n<li>changed the WordPress TwentyTen themed blog&#8217;s header.php (where the &lt;style&gt; &#8230; &lt;\/style&gt; CSS sits and add in that first idea above &#8230;<\/li>\n<li>tested the &#8220;look&#8221; of the blog posting and saw that all <i>code<\/i> elements were better (being more readable out to the right <font size=1>(that&#8217;s the &#8220;-x&#8221; in &#8220;overflow-x&#8221;)<\/font>)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Voila!  A fairer go for the <i>code<\/i>!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49817' onclick='var dv=document.getElementById(\"d49817\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pdf\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49817' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Karaoke YouTube Video Search Event Timing Tutorial blog posting&#8217;s presentation (ie. its &#8220;look&#8221;), at least earlier on today had some of its priorities out of skew. It was a blog post trying to get the reader to examine &#8220;the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-overflow-x-code-within-cell-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[151,218,281,3737,3738,2521,2621,2561,3736,970,972,997,1953,1209,1212,1581,1319,1456],"class_list":["post-53059","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-blog","tag-code","tag-css","tag-descendant","tag-descendant-selector","tag-nest","tag-nesting","tag-overflow","tag-overflow-x","tag-post","tag-posting","tag-programming","tag-selector","tag-style","tag-styling","tag-table-cell","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53059"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=53059"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53059\/revisions"}],"predecessor-version":[{"id":53068,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53059\/revisions\/53068"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}