More Ruby on Rails and Bootstrap – My Experience

More Ruby on Rails and Bootstrap – My Experience

I did more work with Ruby on Rails and Bootstrap and encountered a few problems that I would like to share on my blog mostly for persons searching for answers.

The glyphicons was not working. I was using the bootstrap-sass gem. Found out that I needed to copy the fonts and link to them in the css file

In application.css.scss

@font-face {
font-family: ‘Glyphicons Halflings’;
src: url(‘/fonts/glyphicons-halflings-regular.eot’);
src: url(‘/fonts/glyphicons-halflings-regular.eot?#iefix’) format(’embedded-opentype’),
url(‘/fonts/glyphicons-halflings-regular.woff’) format(‘woff’),
url(‘/fonts/glyphicons-halflings-regular.ttf’) format(‘truetype’),
url(‘/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular’) format(‘svg’);

I copied the font files to /public/fonts otherwise you could place it in /app/assets/fonts/ but you would might have to do some configuration. I am reading that using the asset pipeline is the recommended approach. Also one way to include the glyphicons in the link_to helper is to use the .html_safe function as follows

<%= link_to '<i class="glyphicon glyphicon-user"></i> My Account'.html_safe

I noticed that database tables are automatically created with a primary key id and created_at and updated_at datetimes. So you can chose to not include these when creating your schema. If you need to rebuild your database tables you can use schema:load instead of running all the migrations (there is a note in the schema.rb file that says this is not recommended). The select_collection helper is case sensitive so keep this in mind if it does not work for you. I learnt that I can collapse all folders in the left panel (for me it’s Sublime Text 3 on Windows 10) using alt + click.

I encountered the following error message when trying to change a column type from string to integer

PG::DatatypeMismatch: ERROR: column “column_name” cannot be cast automatically to type integer HINT: Specify a USING expression to perform the conversion.

I found the syntax I needed here but I was getting another error.

PG::UndefinedColumn: ERROR: column “createduserid” does not exist
HINT: Perhaps you meant to reference the column “items.CreatedUserId”.

After doing some troubleshooting I found out that the column name is case sensitive and to maintain the case from the rails code I needed to include the name in quotes as follows

class ChangeCreatedUserIdInItems < ActiveRecord::Migration
def change
change_column :items, :CreatedUserId, ‘integer USING CAST(“CreatedUserId” AS integer)’

This was another error I encountered

PGError: ERROR: column “CreatedUserId” is of type integer but expression is of type character varying at character HINT: You will need to rewrite or cast the expression.

I corrected this by not setting the user id in params but in the model itself as follows

@item =, :ItemDetails, :PriorityId, :DateCreated))
@item.CreatedUserId =

By default the datetime is taken from the server using UTC time zone and stored in the database as UTC timestamp. I needed to display datetimes to the user in their time zone. The local_time gem promises to do this but does not work totally for me. If I use my refresh data button the time offsets by 4 hours. Still troubleshooting this. I am seeing recommendations to store the time zone in the user profile. Also using cookies and javascript.

I found that sometimes if you are not seeing a change reflected in the website immediately try restarting the server. Depends on the type of change and this is not common. Found this nice tool to easily build your datetime format string – I also needed this html color picker – Also here is a nice list of Bootstrap alternatives.

I had changed the name of the app in Heroku and was getting the following error

C:\Sites\my-tech-demo>heroku git:remote -a my-tech-demo.git
! Couldn’t find that app.

I had to remove the remote link in git and add it back. One way to do this is as follows

git remote rm heroku
git remote add heroku

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s