Browsing the Bootstrap category

Jquery AutoComplete doesn’t work when in Bootstrap modal

I was correctly getting the JSON data, but the autocomplete part (below the textbox) wasn’t appearing.

The trick is to increase the z-index of it:

<style type=”text/css”>

                                .ui-autocomplete {

                                                z-index: 5000;



Read the article

Web Development for Intermediate Programmers – with PHP

I’ve written a ~300 page book on PHP!  While I do go over the basics, I go over “common” concepts of database manipulation and Ajax. I’ve also sprinkled in some User Interface and User Experience comments:

Read the article

javascript not reading value from bootstrap modal

I had a Bootstrap modal that was being used to change the value in a database.  When the user clicked “Save Changes” though, it wasn’t saving – the new values were “undefined”.

The solution: in the JavaScript function, I was getting the values AFTER the modal had closed.  First, get the values… THEN do what you have to do (and let the modal close).  My values were IN the modal, which had been removed from the screen (thus, undefined).

Read the article

PHP Pagination

I’ve updated my PHP Pagination code to reflect Twitter Bootstrap:

Here’s the primary code for it:

Note on Line 5, I have the query that I’m getting data for. The on line 38 I use the SAME query to get the total number of rows.

Lines 8 – 55 set the initial pagination configuration.

Lines 62 – 97 display the data (note the limit/offset added to the original SQL on line 58).

Lines 101 – 215 is the actual pagination.

Note, you’ll need the “Pager” class found here, as well as the mysqli_result() function (that doesn’t exist when converting from mysql_result() ) –

Read the article

javascript set focus to textbox

I had a textbox that I wanted to set the focus to, but adding .focus() was not working.

The problem was because it was in a (Bootstrap) modal, I had to set the focus once it was shown:

                $(‘#modalSearch’).on(‘’, function () {




Read the article

jquery autocomplete appears below bootstrap modal

I had a jQuery autocomplete, but it wasn’t appearing correctly in the Boostrap modal.
This led me to the answer, although my jQuery is slightly different because I had multiple options for the autocomplete:


$( “#new_supervisor_name” ).autocomplete({

                source: “/filename.asp”,

                dataType: ‘jsonp’,

                minLength: 2,

                autoFocus: true,

                  select: function( event, ui ) {

                                MyCustomJavascriptFxHere( ui.item  );




Read the article

Bootstrap tabs doesn’t work inside of a modal

The trick is, I had javascript included in the partial (in my Rails app) – put that in the body (parent) instead

Read the article

bootstrap header image next to text centered

(Wow, this took much longer to figure out than I wanted!)

For my app, I wanted the login screen to have the content centered; and above the input boxes, I wanted my logo + text saying “Login” (as a H1).  I had a lot of trouble with this!  I tried Bootstrap’s “media” queries, but eventually used the grid system; where the part on the left was just right-aligned.

What also threw me off was, I happen to be developing on a laptop (instead of my usual desktop) – and the screen was smaller. So all of my testing in the grid system using “col-md-6” didn’t work; I (surprisingly?!) had to specify all of the screen sizes.

This is what I ended up with:

<header class=”container-fluid” style=”margin-bottom:20px;”>
<div class=”row”>
<div class=”col-xs-6 col-sm-6 col-md-6 col-lg-6″ align=”right”>
<img src=”….” class=”img-responsive” alt=”sample image next to header that’s centered in bootstrap” />
<div class=”col-xs-6 col-sm-6 col-md-6 col-lg-6″>

Ironically enough, when I finally got it, I felt it looked better without the logo there, and just the centered “Login” text!

Read the article

bootstrap reduce page header margin

I have a Boostrap web app,  with a main navigation at the top, and a page-header after it (all in a “.container”).  But the heading was too far away from the navigtion.

I ended up with adding this CSS in: {margin-top:5px !important;} h2 {margin-top:5px !important ;}

Read the article

Combine radio button and dropdown

For my mobile web app, I wanted to have the functionality of a dropdown, but I didn’t want to actually one.  I wanted the options to be displayed on the screen; like radio buttons.  I looked into building my own combination “radio button and dropdown,” and came up with the below.  At first I looked into making my own jQuery plugin, but that seemed too difficult.  So I took components from Bootstrap and modified it:




                  <a id=”dLabel” data-target=”#” href=”#” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>

                                <span id=”contentSelected”>Select Item</span>



                                 <ul aria-labelledby=”dLabel” style=”padding:0px;”>

                                  <li id=”1″ data-value=”Link” onClick=”UpdateDropDown(;”>Legend of Zelda</li>

                                  <li id=”2″ data-value=”Mario” onClick=”UpdateDropDown(;”>Super Mario World</li>

                                  <li id=”3″ data-value=”Shulk” onClick=”UpdateDropDown(;”>Xenoblade Chronicles</li>

                                  <li id=”4″ data-value=”Zael” onClick=”UpdateDropDown(;”>The Last Story</li>




 <input type=”text” name=”txtValueToPass” id=”txtValueToPass” />


                function UpdateDropDown(item) {

                                 $(‘#txtValueToPass’).val( $(‘#’ + item).data(‘value’) );

                                $(‘#contentSelected’).html( $(‘#’ + item).html() );





Results here:

Read the article