CSS problems and solutions

A collection of tricks that were needed to create the new stylesheets

Merging the borders of two ajacent divs/controls

Two borders next to each other are ugly, and border-collapse does not work for divs. You can hide one border, but when the border changes on hover for instance that is fugly. See the following fiddle for the trick to solve it.

Joining controls, Bulma style

See this fiddle.

In DomUI I want something else: controls like Text2<> and DateInput2 have "internal" buttons. These must be inside the encapsulating div of the control so that the whole thing stays together. These buttons must join like has-addons. But the whole thing itself must also be joinable outside. See this fiddle for the experiment with two levels of joining .

See also this one which attempts to style all components using generic classes and allowing for "joining" components together using "has-addons".

Restyling the fugly input type="file" control

An example can be found in this fiddle. The core ideas are:

• Make a parent container position: relative
• Make the input itself position: absolute and make it fill its entire container (top, bottom, left, right: 0).
• Hide the fugly mother by setting opacity: 0
• In the parent container add whatever you want to show as button and selected filer UI

The button and selected UI overlays the input type=file, but clicking the whole rigmaroo will make the input type=file react as usual.

I tested the above fiddle on Chrome, Firefox and IE Edge 14, 15 and 16.