Develop Reference

Show only HTML elements that fit fully in the parent div? (Includes JsFiddle example)

JS Fiddle Example
I have a div which contains user generated HTML elements. Each line in the div can be any number of characters, but displays only on one line, and does not wrap. My issue is that partial elements are shown vertically, and due to the variety of HTML elements, I cannot anticipate exactly how many lines of text can fit.
The image below shows the issue, in this case using only list item elements (highlighted with a red arrow.) I've included the HTML and CSS are below as well.
I have been looking for a ReactJS compatible solution to prevent element that do not fit completely from being displayed (I'm open to nearly anything CSS, NPM module, JavaScript snippets, just no jQuery.) All elements needs to remain at a static size, so dynamically resizing the text or container is also not suitable unfortunately.
The solution need only work in Chrome.
Unfortunately despite hours and hours searching for solutions in the form of modules on NPM or CSS solutions such as -webkit-line-clamp, I've found nothing suitable. -webkit-line-clamp will only work (as far as I can tell) on text within a single element, so it will fix a paragraph with 5 lines, but it will not fix 5 single line paragraphs.
Any ideas on how to solve this would be appreciated greatly. I've been struggling with this for months. Thank you very much for reading.

Recreating Doodles Accordion Table

In my current Webproject I have to implement a table containing all days of a month, resulting in ~30-31 table columns. Since such a huge table isn't very pretty, I wanted to implement something similar to the tables of Doodle Polls. Doodle folds a table, replaces the hidden columns with a pic and if you click on that picture it unfolds the columns -> displays the hidden columns.
But how do I achieve such a behaviour? I'm new to Javascript and not that familiar with fancy CSS3 techniques.
Especially, how do I replace the hidden columns with a picture?
The tutorials I've found only allow to hide specific columns and not to replace them.
PS: I also tagged RoR, since the project I'm working on is built with RoR and maybe there is also a Rails solution for that problem?
PPS:

You could hide the columns you want to hide first and have a column with the image displayed in the table. When the image (folding) is clicked you can hide the column containing the picture and make the other columns visible again. This is not really about some fancy css3 stuff but you need basic knowledge of how to interact with DOM elements through javascript (hide / show) elements. That should do the trick.
See this tutorial at w3schools. All that you need is get the elements you need (Image Column and all TDs in the hidden columns) ant then apply a css style to them (hidden / visible).

TinyMCE: Add complex format

I want to add a format to the TinyMCE Editor for Joomla. It should be a format that displays a scalable graphical box around the content. Since the box must scale with the content, I cannot simply use one background box graphics. Instead, I must use graphics for the sides of the box which then can scale in x and y direction. In order to achieve this, I need to wrap the text into more than one div. Thus, I need a possibility to add a format that wraps the content into these divs. However, it seems that TinyMCE does only allow formats that wrap the content into one HTML element - but, as stated above, I need more than one. Is this possible?

No, this is not possible. You may only define what html element you want to use to wrap the content in. The setting is called root_block_element
tinyMCE.init({
...
forced_root_block : 'p'
});

Javascript tooltip performance

I have a list of entries, for each entry I have to create a tooltip in javascript, what do you think is better to do considering the performance?
1) create a div for the popup and another hidden div for each entry that contains the content of the popup, and each time a tooltip is created copy the content of the corresponding div into the one for the popup and display it.
2) create a div for each entry, when it have to display the tooltip do an Ajax call to retrieve the content of the popup and put into the div (if it isn't done before) and display the tooltip
EDIT:
the tooltip should display a complex HTML, the clients could be mobile or computer the list is small because is paginated

The choice strongly depends on how many elements and how much content is stored inside the tooltip.
An ajax call is expensive if you think people will tends to open tooltips many times, but if they may contain images, videos, facebook likes, tons of text and/or other expensive resources it could be a good idea with some kind of cache strategy so you have no more than one ajax call for every tooltip (e.g using the localstorage on modern browser)
if tooltips contain instead no more than a couple of paragraphs is quite useless to add complexity to your application with ajax calls, server-side security issues and extra javascript. Just insert them statically

I would actually create a JavaSrript array or object with all of the loaded tooltip values and then replace the text in the tooltip DIV when showing it. Creating a bunch of DIVs will not help performance.

Don't reinvent the wheel, use a jQuery plugin such as qTip or tipsy.

Change the height of a textfield that is set to "Expand to fit" dynamically in LiveCycle

I'm using Adobe LiveCycle Designer to create dynamic forms which are automatically filled from an XML document. Unfortunately, I'm not very familiar with LiveCycle so I ran into a problem I cannot solve. Let me give you a simplified version of what I want to do and what I have tried so far.
I have a table with two columns, "Song" and "Lyrics". Each row of the table contains two textfields, one for the song and one for the lyrics, which are automatically populated automatically from an XML document. Unfortunately, some entries in the "Lyrics" column are too big so they expand beyond the page. In order to solve that, I wrapped each textField in a Flowed subform, and for each of them I checked the "Allow page breaks within context" option.
The problem with this approach is that the two textfields are no longer growing together. So, although I'm getting a big Lyrics which is spanning in several pages, the Song textField doesn't grow along with the Lyrics.
I was trying to find a solution for that and I realized that the only way might be to dynamically change (using Javascript) the height of the Song textfield to match the one in the Lyrics. But since the lyrics textField is set to "Expand to fit" I cannot take the height value, it always returns "0in" even though it's not.
Do you guys have any solution for getting the height of a field that is set to "Expand to fit", or maybe a better way to make the textFields grow together?
Thank you in advance for all your help

You have to use the following script in a layout ready event:
var heightField = xfa.layout.h(xfa.resolveNode(fieldName), "pt"));
Remember that you can access this property only in the layout ready event, when the form is rendered and so the height is effectively calculated.
In my opinion the best way to achieve your result is to put the two field in the same subform (autofit in height checkboxed) and then put the height of the two fields to the same value of the height of their parent. So, you can simply write something like that:
var heightField = xfa.layout.h(this.parent, "pt"));
this.h = heightField + "pt";