1

I tried to use bootstrap-sass v.3.1.1.1 for my rails 4 app and its just not working as its supposed to and I cant find the solution! Maybe you can help me.

My files are looking like this:

/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap
 *= require_tree .
 */

/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .

After those changes in both files I recognized a change in my views (font e.g.) and I can use the bootstrap buttons.

But when I try to use the grid structure or javascripts nothing is happening! For grid I use this code in one of my views:

<div class="row">
  <div class="col-lg-10">
    <table>
        <tr><td><%= f.input :pre, as: :text, label:'Pre-Description' %></td></tr>
        <tr><td><%= f.input :post, as: :text, label:'Post-Description' %></td></tr>
        <tr><td><%= f.input :comment, as: :text %></td></tr>
    </table>
  </div>

  <div class="col-lg-2">
    <table>
        <tr><td><%= f.input :save_h, as: :float, label:'h/AC' %></td></tr>
        <tr><td><%= f.input :save_c, as: :float, label:'concessions/AC' %></td></tr>
        <tr><td><%= f.input :save_other, label:'others' %></td></tr>
        <tr><td><%= f.input :affect_design, label:'Design' %></td></tr>
        <tr><td><%= f.input :affect_stress, label:'Stress' %></td></tr>
        <tr><td><%= f.input :affect_me, label:'Manufacturing' %></td></tr>
        <tr><td><%= f.input :affect_other, label:'Others' %></td></tr>
        <tr><td><%= f.input :affect_dno, label:'Drawing number/ HTZ' %></td></tr>
        <tr><td><%= f.input :affect_mid, label:'Material ID' %></td></tr>
        <tr><td><%= f.input :affect_otherdoc, label:'Others' %></td></tr>
        <tr><td><%= f.input :owner, label:'Idea owner' %></td></tr>
        <tr><td><%= f.input :pps, label:'PPS available' %></td></tr>
        <tr><td><%= f.input :reference, label:'Reference (VV/ ZTV)' %></td></tr>
    </table>
  </div>
</div>

Even though there was a change in position of the form fields its not really using the right grid.

Any thoughts?

Best regards!

Edit: html code of my view

One Pager

  <link data-turbolinks-track="true" href="/assets/theming.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/mepagers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/pimps.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/mepagers.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/pimps.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="e+3Scs+/HbQtb6q7pHrJ0Ewxheqctfeou35iJT/6lqw=" name="csrf-token" />
</head>

Okay, as you can see the view loads all those javascripts but not the stylesheets. Is that normal or is something missing? I would really appreciate any kind of help here!

Syk
  • 393
  • 4
  • 19
  • Make sure the bootstrap asset files the asset pipeline is pulling in are v3 and above. The syntax for JS and grid changed between v2 and v3. Check the source files in your favoured browser to find the version number in the comments. – JellyFishBoy Jun 11 '14 at 11:49
  • Im not quite sure if thats what you mean but my /vendor/assets/stylesheets/sass-bootstrap.min.css and sass-bootstrap.css are both v3.0.21! Same for /vendor/assets/javascripts/sass-bootstrap.min.js and sass-bootstrap.js! If thats not what you mean then please explain it al little easier I just started with rails. Thanks. – Syk Jun 11 '14 at 11:56
  • It was, so that's good. I also notice you are using `require_tree .` in the css and js, which will include all files in the relative folder. Is there by any chance any conflicting asset files in those folders? – JellyFishBoy Jun 11 '14 at 12:43
  • Not sure what could cause a conflict. Again I'm still at the beginning of my way to understand rails :D In my `/assets/stylesheets` folder are 2 empty css.scss files (only comments) that are coming from my 2 scaffold. Moreover there is a `theming.css.scss` that includes some code for bootstrap (I will attach it to my post) and a `scaffold.css.scss` that sets the basic styles. Is it a problem if one of them includes @import 'bootstrap' because I already got it in my application.css? The javascripts folder only got 2 more files from my scaffolds and they are empty (except the comments) – Syk Jun 11 '14 at 13:07

2 Answers2

1

I see the issue now. You are requiring bootstrap at the top of your CSS file require bootstrap and also in your theming stylesheet @import "bootstrap";.

Remove the reference in your theming stylesheet.

JellyFishBoy
  • 1,658
  • 1
  • 17
  • 25
  • Yea after your conflict comment I tried a few things like removing the line because it makes sense. But didnt solve the problem though :( I'm not sure if rails is loading the application.css completly because my simple_form changes are not being applied too! – Syk Jun 11 '14 at 13:33
  • Ok nevermind the simple_form is working.. not as intended but if I change some values the form changes too. So the application.css is getting loaded. Maybe just not properly. Same with bootstrap features. Some are working but most of them are not. – Syk Jun 11 '14 at 13:41
  • Still havent found the problem! No one who could help? – Syk Jun 12 '14 at 07:50
  • Do you have your project on a source code control system online like Github or BitBucket so I can diagnose the problem further? – JellyFishBoy Jun 12 '14 at 11:07
  • Unfortunately I cant do that because its from my workplace. But I can provide some more information here if you need anything! I added the html source code of my view where I tried to integrate the grid! Is it normal that it doesnt show each stylesheet? – Syk Jun 12 '14 at 11:46
  • Could it be a problem with my browser cause I'm limited to use IE8. – Syk Jun 12 '14 at 12:01
0

Okay it worked with those lines in my layout:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Got it from this topic: IE8 issue with Twitter Bootstrap 3

The problem is obviously the IE8 :/

And no idea why its working :D

Community
  • 1
  • 1
Syk
  • 393
  • 4
  • 19