Archive for the ‘Twitter Bootstrap’ category

Twitter Bootstrap Datepicker control with custom placement!!

December 29th, 2012

There really aren’t many good calendar controls for javascript at the moment, the best one I could find is located here: http://www.eyecon.ro/bootstrap-datepicker/  This guy has done a great job setting up this control for everybody to use and if you use bootstrap it looks and feels just like the rest of the library.  The one problem with the control is that it doesn’t show up anywhere except below your input box, which is bad if you are showing your site in a screen limited place, like an IPad, it will just go below your screen if the control is close to the bottom.

This guy took the project to github here: Original Github repo and I recently forked that and you can get the update I have made here: My Github repo.

A word of warning with my project, I have removed the little caret arrow that the original project had because I didn’t want to take the time to figure out the  triangle by border trick, be my guest if you would like to take that one on, I don’t think its that bad, just needs to be placed at the bottom instead of the top if you are placing the datepicker above the control.

The issue I sort-of resolved, well, hacked for my situation can be found here: https://github.com/eternicode/bootstrap-datepicker/issues/200.  Here is the final result of what my script will do.

datepicker_top_placement

Creating a grouped tablerow using Twitter Bootstrap and Backbone Marionette

November 9th, 2012

I have been working on a project where I need data grouped or summarized by date, and I wanted to make use of Backbone and Marionette with its CompositeViews and ItemViews so I whipped up an example, check it out below

It makes use of a Marionette CompositeView to create a table and then takes that and an ItemView to create rows that are wrapped with the Twitter Bootstrap accordion control to do the collapsing of the rows, how sweet is that??

How to add a fixed header to your Twitter Bootstrap Table

October 23rd, 2012

The table styling in bootstrap is very nice, the biggest benefit being that it is responsive and works on all devices, all you have to do to make the columns disappear is to put a class of “hidden-phone” on the columns you want to hide.  I have using it to death in my application I have been working on and I have noticed on large sets of data, especially data that has to scroll down, you lose the headers after it overflows past your div.  For me this was unacceptable because your user will lose the context of the data and will not understand what the columns hold.  I did some searching and came across this jQuery plugin that will basically take the table header you have and make a copy of it and lay it on top of your bootstrap header, here is a link to the plugin:https://gist.github.com/2948136.  I have the basic layout of your html that will make use of this below:

<div class="fixed-table">
    <div class="table-content"> 
        <table id="tableId" class="table table-fixed-header">
            <thead class="header">
            <tr>
                <th>Your Header</th>
            </tr>
            </thead>
            <tr>
                    <td>Your Data</td>
                </tr>
        </table>
    </div>
</div>

You will need the css as it does some nice styling for you but I don’t think its necessary, it would be nice down the road if this just becomes a class you can tack on to your html and it will do this work for you. Here is simply how you create the fixed header: $(‘.table-fixed-header’).fixedHeader();

Twitter Modal on the phone? No problem!!

October 19th, 2012

I have been using Bootstrap sometime now, we love it so much at our company that we have decided to use for our web app.  Recently I used it to format the tables in our app and due the responsive nature of bootstrap it just naturally works, here is a link to their base component so you can see it in action: http://twitter.github.com/bootstrap/base-css.html#tables.  You can hide and show the columns by simply tagging you elements or divs with a class of ‘hidden-phone’  or ‘visible-phone’ respectively.  That was a big win for us due to the responsive nature of  bootstrap, now for my main issue.

In the mobile version of the site I wanted to pop up a bootstrap modal window and allow the user to fill out some fields, here is the link to the modal examples http://twitter.github.com/bootstrap/javascript.html#modals.    This works exactly as expected minus one little gotcha, the body of the modal, if greater than 400px I believe, will go past the bottom of the screen on a phone, particularly the iPhone, thus leaving the user stranded with a screen they can’t close.  In comes the  Modal Responsive Fix which was written by Nifty Lettuce, which I have no affiliation with but I am so thankful for this JQuery plugin cause it really saved my bacon with this.  Here is the link to his fix: http://niftylettuce.github.com/twitter-bootstrap-jquery-plugins/, I will let you look over there for how to get it and set it up with your app.

Beware of outdated code!!!

October 8th, 2012

I have been working with Twitter Bootstrap with a project at work and I recently ran into a bit of a problem and I was beating my head into a wall about it and I wanted to share my findings.  If you are ever dealing with an open-source library like Bootstrap, make sure you are working with the latest examples and the latest build of the tool.  I was following an example I found online and down in the <a> tag they had this: parent=’#accordion2′ and that was fine for the older version of Bootstrap but the new version needs this: data-parent=’#accordion2′.  I beat my head against the wall for about an hour trying to figure that one out before I realized I was dealing with an older example.  I hope this helps someone, thanks.

Twitter Bootstrap Collapse not working correctly

August 14th, 2012

The app I have been working on has a stackable list view that I have been very pleased with but I notice that you had to click on any item twice to get it work correctly. I was following a tutorial from the guys on the Bootstrap team and they said that you needed to include the collapse plugin to get the functionality I was looking for. After further research I realized that the main bootstrap file that I am using (2.0.0) has the collapse already included in it along with everything else. All I had to do to make it work correctly was to remove the extra library and everything works fine, I hope this helps anybody that is struggling with this issue.

Twitter Bootstrap not displaying correctly on mobile devices

August 10th, 2012

I have been working on a HTML5/Javascript mobile/desktop application using Twitter’s new bootstrap CSS library found here.  Everything was going along just fine until I tried to view my site on mobile devices, where it didn’t do the formatting I expected it to like Jquery Mobile would do, so I started scratching my head trying to figure out why it wasn’t rendering like it should, then I came across the meta tags for the html.  All I had to add was this line:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And it renders just like I wanted it to, I would have never thought it would be that simple, but it is. I am really starting to like this library, I will keep you updated at time goes on.