{"id":51931,"date":"2021-03-15T03:01:17","date_gmt":"2021-03-14T17:01:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51931"},"modified":"2021-03-14T07:26:39","modified_gmt":"2021-03-13T21:26:39","slug":"css-display-inline-block-contenteditable-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-display-inline-block-contenteditable-tutorial\/","title":{"rendered":"CSS Display Inline-Block Contenteditable Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Display Inline-Block Contenteditable Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_contenteditable_combobox.jpg\" title=\"CSS Display Inline-Block Contenteditable Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Display Inline-Block Contenteditable Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='CSS Display Inline-Block Primer Tutorial' href='#cssdi-bpt'>CSS Display Inline-Block Primer Tutorial<\/a> got us curious about other CSS &#8220;*&#8221; selector thoughts, and there is no way we&#8217;ll think of all the possibilities, so why not open it up to the user to control?<\/p>\n<p>We&#8217;ve discussed before the great &#8230;<\/p>\n<ul>\n<li>(element attribute) <a target=_blank title=Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true &#8230; the means to change the &#8230;<\/li>\n<li>innerHTML content of those elements with no (form navigation friendly) &#8220;value&#8221; attribute &#8230; adding to their utility, in which, in the past, we have differentiated the &#8230;<\/li>\n<li>button (innerHTML) element from input type=button (value) element &#8230; today, getting &#8220;button&#8221; and &#8220;contenteditable&#8221; together for user interaction, but in so doing differentiate &#8230;<\/li>\n<li>double click scenarios &#8230;<br \/>\n<table>\n<tr>\n<th>action<\/th>\n<th>non-mobile status<\/th>\n<th>mobile status<\/th>\n<\/tr>\n<tr>\n<td><a target=_blank title='Event ondblclick information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/event_ondblclick.asp'>ondblclick<\/a><br \/>event<\/td>\n<td>works<\/td>\n<td>does not work<\/td>\n<\/tr>\n<tr>\n<td><a target=_blank title='Event onclick information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onclick.asp'>onclick<\/a><br \/>event<br \/>combined with<br \/>setTimeout<br \/>logic<\/td>\n<td>works<\/td>\n<td>works<\/td>\n<\/tr>\n<tr>\n<td>content change<br \/>opportunity<br \/>logic<\/td>\n<td>ondblclick<br \/>or<br \/>onclick\/setTimeout<\/td>\n<td>onclick\/setTimeout<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p> &#8230; to facilitate your own &#8220;gobsmacking experience&#8221;.  Today, the &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.html-GETME\" title=\"display_inline_block_example_combobox.html\">how we got there<\/a> web application for you to see for yourself how <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.html-GETME\" title=\"display_inline_block_example_combobox.html\">display_inline_block_example_combobox.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.htm\" title=\"Click picture\">&#8220;proof of concept&#8221; web application<\/a> works &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.html\" style=\"width:100%;height:600px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/css-display-inline-block-contenteditable-tutorial\/'>CSS Display Inline-Block Contenteditable Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssdi-bpt'>Previous relevant <a target=_blank title='CSS Display Inline-Block Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-display-inline-block-primer-tutorial\/'>CSS Display Inline-Block Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Display Inline-Block Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.jpg\" title=\"CSS Display Inline-Block Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Display Inline-Block Primer Tutorial<\/p><\/div>\n<p>The CSS property <a target=_blank title='CSS display property' href='https:\/\/www.w3schools.com\/cssref\/pr_class_display.asp'>&#8220;display&#8221;<\/a> is enormously useful for us here at RJM programming.  The way we most commonly use it is in the form (for element ID=eleid) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  #eleid { display: none; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; to make element &#8220;eleid&#8221; be invisible (and whitespace it would have occupied is squished up, as distinct from &#8220;#eleid { visibility: hidden; }&#8221; &#8230; as you can see that is useful.  Now, putting that element &#8220;eleid&#8221; back to being visible can be achieved via &#8230;<\/p>\n<table style=\"font-size:8px;\">\n<tr>\n<th><\/th>\n<th>For &#8220;block&#8221; elements (eg. &#8220;table&#8221;, &#8220;iframe&#8221;)<\/th>\n<th>For &#8220;inline&#8221; elements (eg. :&#8221;span&#8221;, &#8220;a&#8221;)<\/th>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td>\n<code style=\"font-size:8px;\"><br \/>\n&lt;style&gt;<br \/>\n  #eleid { display: block; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/td>\n<td>\n<code style=\"font-size:8px;\"><br \/>\n&lt;style&gt;<br \/>\n  #eleid { display: inline-block; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<td>Javascript<\/td>\n<td>\n<code style=\"font-size:6px;\"><br \/>\ndocument.getElementById('eleid').style.display='block';<br \/>\n<\/code>\n<\/td>\n<td>\n<code style=\"font-size:6px;\"><br \/>\ndocument.getElementById('eleid').style.display='inline-block';<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; but the other day we stumbled on an incredible by-product of this topic.  We accidentally did &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  * { display: inline-block; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and we were gobsmacked by the result.  So today we&#8217;ve written a &#8220;proof of concept&#8221; web application for you to see for yourself how <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.html_GETME\" title=\"display_inline_block_example_combobox.htm\">display_inline_block_example_combobox.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.htm\" title=\"Click picture\">&#8220;proof of concept&#8221; web application<\/a> works &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/display_inline_block_example_combobox.htm\" style=\"width:100%;height:600px;\"><\/iframe><\/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='#d51916' onclick='var dv=document.getElementById(\"d51916\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51916' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51931' onclick='var dv=document.getElementById(\"d51931\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51931' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s CSS Display Inline-Block Primer Tutorial got us curious about other CSS &#8220;*&#8221; selector thoughts, and there is no way we&#8217;ll think of all the possibilities, so why not open it up to the user to control? We&#8217;ve discussed before &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-display-inline-block-contenteditable-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":[12,14,37],"tags":[2486,174,2442,281,341,576,2487,3580,652,861,1666,997,3582,3581],"class_list":["post-51931","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-block","tag-button","tag-contenteditable","tag-css","tag-display","tag-html","tag-inline","tag-inline-block","tag-javascript","tag-onclick","tag-ondblclick","tag-programming","tag-proof-oif-concept","tag-tutoroal"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51931"}],"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=51931"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51931\/revisions"}],"predecessor-version":[{"id":51933,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51931\/revisions\/51933"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}