Responsive Tables

Sometimes we have tabular data that do not go along well with mobile by default.

One of the approaches can be putting tables in a wrapper DIV to make them scroll horizontally on smaller devices as proposed by Bootstrap. But I’m not a big fan of it as the scrollbars are almost hidden on mobile devices and there are chances that user oversight them.

The other approach is to change the display of table on small device to display entire data on screen without scrollbar and that is what I’m going to demonstrate now. To accomplish that, I used the one of the underused CSS property content: attr(value string).

Read more…

Bootstrap 3: Dropdown form fields without <form> tag

bootstrap 3: dropdown form

There are times when we need some forms in dropdown menu, e.g. login/register/settings. The implementation is very easy in Bootstrap 3, however with form fields inclosed in <form> tag. But if for some reason we cannot use <form> wrapper (take instance of moonshine technologies .NET Web Form or JSF where entire page is wrapped in single <form>) then there is a peculiar behavior that dropdown get closed when you click on input fields.

Read more…

Bootstrap 3 Modal – Easy way

For past one year I am mostly using Bootstrap 3 (UI framework) for RWD and rapid prototypes, and I discovered that non-UI-background developers usually face problems during the implementation of Modal popups. To make my work easier, I have written a wrapper function in JavaScript for Bootstrap Modal. It does not need any HTML semantics to be present in DOM. The necessary HTML is added to document body when it is called first time, and later the cached instance is used. I tried to make it as simple as I think of and utilized the most used Bootstrap options for Modal.

Read more…