css - The Lazy Log

css

Using "flex" property in CSS to define webpage layout

Designing a flexible layout which can scale to different screens on many devices is non-trivial. We often use float, position: absolution or other properties to achieve the desired result. However this process is uncomfortable to developers and we always dream of a better way. Today, I want to introduce to

html

Customize File upload control

Unlike other form controls such as textbox, checkbox or radio button, you'll find it hard to customize file upload control. The look and feel of this control is totally managed by the rendering browser. A simple customization like changing the button color or remove the text "Choose

css

Correct configuration to fix CORS issue with CloudFront

If you are using CloudFront for hosting static assets and having trouble with the CORS which prevents the icons from displaying properly on your website, in this post, I am going to show how to resolve this issue. As you have already known, the main cause of CORS issue is

rails

Custom dialog for data-confirm in Rails

Every Rails developers might be already familiar with data-confirm attribute for a link. It is used to ask for user confirmation before executing the action on behalf of user. Here is one example <%= link_to "Delete", post_path(post), method: :delete, confirm: "Are you sure?"

rails

Twitter Bootstrap 3 + Rails 4: Fix issue which prevents fonts from loading

Normally, there are two basic ways to integrate Twitter Bootstrap into your Rails application 2. Install a twitter boostrap gem and do a little configuration 3. Manually copy Bootstrap JS + CSS + Fonts into your app The first option is quite easy and many people choose to follow this one. There

rails

Resolve CORS fonts issue on Firefox (and now Chrome too) with Rails assets pipeline

Update If you are having this issue with CloudFront and you have access to Nginx or Apache server, you should read this post: Correct configuration to fix CORS issue with CloudFront When using custom fonts such as FontAwesome or Glyphicon, you might realize that some icons disappear on Firefox (or

html

Get width/height of invisible DOM elements

When working with elements in jQuery, you might need to get width/height of certain invisible DOM elements. By default, jQuery would return 0 in this case because it can not calculate the actual height() of that element. In order to solve this problem, I take advantage of jquery.actual