CSS Display Inline-Block Contenteditable Tutorial

CSS Display Inline-Block Contenteditable Tutorial

CSS Display Inline-Block Contenteditable Tutorial

Yesterday’s CSS Display Inline-Block Primer Tutorial got us curious about other CSS “*” selector thoughts, and there is no way we’ll think of all the possibilities, so why not open it up to the user to control?

We’ve discussed before the great …

  • (element attribute) contenteditable=true … the means to change the …
  • innerHTML content of those elements with no (form navigation friendly) “value” attribute … adding to their utility, in which, in the past, we have differentiated the …
  • button (innerHTML) element from input type=button (value) element … today, getting “button” and “contenteditable” together for user interaction, but in so doing differentiate …
  • double click scenarios …
    action non-mobile status mobile status
    ondblclick
    event
    works does not work
    onclick
    event
    combined with
    setTimeout
    logic
    works works
    content change
    opportunity
    logic
    ondblclick
    or
    onclick/setTimeout
    onclick/setTimeout

… to facilitate your own “gobsmacking experience”. Today, the “proof of concept” how we got there web application for you to see for yourself how display_inline_block_example_combobox.html‘s “proof of concept” web application works …


Previous relevant CSS Display Inline-Block Primer Tutorial is shown below.

CSS Display Inline-Block Primer Tutorial

CSS Display Inline-Block Primer Tutorial

The CSS property “display” is enormously useful for us here at RJM programming. The way we most commonly use it is in the form (for element ID=eleid) …


<style>
#eleid { display: none; }
</style>

… to make element “eleid” be invisible (and whitespace it would have occupied is squished up, as distinct from “#eleid { visibility: hidden; }” … as you can see that is useful. Now, putting that element “eleid” back to being visible can be achieved via …

For “block” elements (eg. “table”, “iframe”) For “inline” elements (eg. :”span”, “a”)
CSS
<style>
#eleid { display: block; }
</style>

<style>
#eleid { display: inline-block; }
</style>
Javascript
document.getElementById('eleid').style.display='block';

document.getElementById('eleid').style.display='inline-block';

… but the other day we stumbled on an incredible by-product of this topic. We accidentally did …


<style>
* { display: inline-block; }
</style>

… and we were gobsmacked by the result. So today we’ve written a “proof of concept” web application for you to see for yourself how display_inline_block_example_combobox.htm‘s “proof of concept” web application works …

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>