Javascript - mcUITools Styles Explained

The purpose of this page is to explain the tools provided via mcUITools js/css

On web pages, users enter data via fields defined with the input tag. There are a few issues with this and a few more browser differences. By setting styles, most of this can be fixed (kludged out of existence).

In order to show before and after, mcUITools.css is not included in the page. Instead a slightly modified version is used where the classname is used to enable individual styles.

Spacing | Sunken effect - Readonly vs Disabled Sunken style details | Font Size | Other Components | Chrome CSS Confusion | References


The most obvious, and easiest to fix, problem with input fields is the text spacing - by default, it is practically touching the left border (in Chrome, like everything this is browser dependent). For the above example, the style is simply placed in the tag. Using mcUITools.css, it is associated with all text and number input fields.

The element specification explicitly says which fields are affected because it should not apply to other input types (such as radio buttons).

Sunken effect

I am used to programming in Delphi and like the way the forms look. I have developed a combination of styles and code to produce those effects. The examples below show sunken text and number fields on both a white and a grey background. Both the readonly defaults appear to be sunken even though there are no special codes to force it. On a grey background, the lower and right borders are not visible in Chrome because they are the same color as the background. This is "fixed" by setting border-color:. With Firefox, the readonly default on a grey background renders with visible lower and right borders.

The Sunken effect is provided via css - the following also adds padding (a left gap) to the fields and changes the background color of the "readonly" fields.

For this example, I have doctored the style sheet a bit and hard coded some styles directly into the input tags since that is the only was (that I know) to show default and style-modified tags on the same page. For instance, I added class values to all the styles and disabled the width style in mcDisplay (so that the table would look better). Normally, a function sets the readonly properties of all the mcDisplay fields. However, in this example, I included that directly in the input tag.

Readonly vs Disabled

I originally set the disabled property to true to make the field readonly and to change the background color - but the results were browser dependent. Both the following fields have the same code .. except for the readonly and disabled parameters. When viewed on various browsers, the lack of consistency (and readability) is obvious.

Sunken style details

The sunken effect was optimized for a grey background and a Chrome browser running on Windows XP. Unfortunately, the only way to know how these will display in other browsers is to just try it.

In the first 2 sections of following table, each row adds a new style so that the effect of each is visible. In the Compare section, various style combinations are used to make a point (not always obvious). To see the styles for a field, right click it and select inspect.

In Firefox 24. border-style: inset; causes the field to render as sunken. In Chrome 49, the border-color: must be set to render the field as sunken.

This table compares the sunken effect colors.

The Firefox values are the defaults used for both the readonly and disabled fields.

Digging deeper into Firefox, there is a jar file that contains the default style sheets. In them, colors are referred to as ThreeDShadow, ThreeDHighlight, ButtonFace, and the like. (Lots of examples) As far as I can tell, these color names are internal only and not supported by any standard. There is also a proposal that CSS provide variables to help solve this problem - but it has not been implemented.

border-style: inset;border-width: 2px; is the Chrome default on Windows XP.

Font Size

This is ridiculous - using Chrome 49 with Windows XP, the size of the regular text and the text in the input fields is about the same. However, using Chrome 50 with Windows 10, the fonts are obviously different sizes and those in the input fields are almost too small to read.

This is a test table - there are 2 input fields rendered as sunken on a grey background. (What I use for my designs.) They are identical except that one has the size set via a style.

Unfortunately, CSS does not provide a way to make the fonts in one style the same as that in another. Therefore, I could use javascript.

I would prefer to use CSS, but there does not appear to be a generic way to fix this .. primarily because if I set the font size using pixels, then IE 6 (and earlier) users won't be able to resize the page. (I am assuming that this is a "don't care" - IE 6 is pretty old and does not support some of the other features I want.) It should be obvious According to this chart, which I have added in parentheses in the above tables.

So - Is the problem Windows, Chrome, or something else? I don't have enough data points to make a claim. Whatever it is - It Sucks!!

I used IE and Microsoft Edge with Windows 10 simply to add additional data points. Since neither has the same problem as Chrome 50, it seems pretty obvious that the problem is Chrome - period. However, many other programs (not mentioned here) work fine in Windows XP but also have font size problems with Windows 10. Therefore, I am still not sure where to place the blame.

Again, the basic rule is - Don't trust the defaults!

Other Components

These UI components have a font size problem with Chrome 50. The mcUITools style sheet "fixes" (kludges) that problem with the following. While the textarea and 2 buttons have adequate spacing, the style sheet also renders textarea components as sunken.

Chrome CSS Confusion

Using Chrome to inspect page elements, the input tags are given as I was never able to find out what the -i- meant. With Firefox, it produces As a result - I removed the "extra" i's.


Author: Robert Clemenzi
URL: http:// / Languages / Javascript / mcUITools_Styles_Explained.html