Konda.eu

Tag Archives: css

No comments

AngularJS hide fields until initialized

A pesky thing about AngularJS is that all of the code in HTML that is mustache {{ is visible. To avoid this everything related to AngularJS can be hidden until website is finished loading up using:

[ng\:cloak], 
[ng-cloak], 
[data-ng-cloak], 
[x-ng-cloak], 
.ng-cloak, 
.x-ng-cloak {
    display: none !important;
}

 

No comments

Styling HTML checkboxes only with CSS

These days' web designs are usually more important than functionality or content itself and It's a real nightmare for every developer to realize dreams of designers. Those usually involve some super fancy styling over checkboxes, radio buttons or other input types which style can't be overridden because it's locked by browser.

Fortunately to keep functionality of one, they don't need to be styled, they can be easily faked with some HTML and CSS.

Continue reading

No comments

Taming Bootstrap 3 - Columns Same Height

During my recent work on a web design layout with bootstrap, I came across a layout that required all bootstrap columns to be the same height. After some experimenting with various positions such as absolute inside relative etc. and none of them working as they should, I ended up using display: flex and wrapped it in a snippet as bellow.

@media (min-width: 992px) {
    .row-eq-height, .row-eq-height > div[class*='col-'] {
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
    }
}

Usage example and demo are shown here:

<div class="container">
    <div class="row row-eq-height">
        <div class="col-sm-4 col-1" style="background: red">
            Some Text
        </div>
        <div class="col-sm-4 col2" style="background: green"></div>
        <div class="col-sm-4 col3" style="background: blue"></div>
    </div>
</div>
No comments

Internet Explorer - Touch Actions Not Working

During recent development of a JavaScript based Windows Store App I came across an interesting problem. On the development PC (it isn't touch ready) everything worked perfectly until the app was installed on the test tablet. After the famous line:

It works on my machine

said a couple of times and a long night of searching what might be the solution, I came across this neat CSS snippet:

html { 
    -ms-touch-action: none; /* -ms- was dropped with IE11 */
}

The cause

After an examination of CSS touch-event, Internet Explorer behaves by the standard so we really can't blame it for this one (just this one). Automatic value (auto) lets user agent (the browser) decide what actions are most appropriate for specific elements, therefore taking control of touch events for better browsing experience. By setting the value to none, the browser lets us do whatever we want with it.