I'm trying to use foundation in a rails app. I have a row with two columns next to each other like the code below shows:
<div class="row">
<div class="large-4 columns"> ... </div>
<div class="large-8 columns"> ... </div>
</div>
It works fine in development, but when I load it in the browser in production mode, the columns stack like a staircase instead of being placed in a row. I've checked the CSS and saw that
*, *:before, *:after { -moz-box-sizing: border-box; }
is missing which I suspect might be the issue. Does anyone know what's going on?
Start with checking if any CSS is loaded in You production environment.
How do You precompile assets? Check the precompiled assets on the production environment.
Where do You host Your app ? Without add-on enabled capistrano does not precompile assets automatically.
Related
I want to create a picture management through my ActiveAdmin administration panel.
I use Carrierwave to upload images from my administration panel, however I fail to display these images as background-image within my CSS code... :/
...because of the following error:
couldn't find file '<%= Image.find(1).path %>'
Here is my CSS:
header{
background-image: asset-data-url("<%= Image.find(1).path %>");
}
My HTML:
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>Your Favorite Source of Free Bootstrap Themes</h1>
<hr>
<p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
Find Out More
</div>
</div>
And the image administration view:
I don't understand how do I link my image to the background-image CSS property?
Calling Rails Database queries in CSS stylesheet will not work. Instead you can rework on the HTML code like the below,
<header style="background-image: url(<%= Image.find(1).path %>);">
and remove the background image code in the CSS.
All the css is ok but the only problem is that I can't change the default bootstrap css.
index.html.erb:
<div class="col-sm-6 no-padding"> Something </div>
_cards.scss:
.no-padding{
padding: 0px !important;
}
Is there any configuration that is causing it?
The only way that works in this app is to write:
<div class="col-sm-6" style="padding: 0px;"> Something </div>
Obs.: I'm using Rails 5.0.1 and I created a new sample of rails app to test and worked like how I intended to do. So I guess that it should be some wrong configuration.
Obs2.: all other components from '_card.scss' are also loading normally.
To solve this issue we have to attempt to call on application.scss the bootstrap first (I mean, above on the list) and then we should call our private css folders after.
Thank you again for the amazing support guys.
I want to use a string value (hex) that's submitted through a form as the background-color for a div class.
The form is:
<%= f.text_field :backgroundcolor %>
The html is:
<div class="bottle"></bottle>
And the css is:
.bottle {
background-color: <%= color.backgroundcolor %>
}
But I just get an invalid css error. How do I use these attributes in the sass? I could use them as inline css, but would prefer not to.
The only way you'd get the result you want is if you persisted the data (stored in the DB).
CSS
If the color var was available from the db, or some other source, you'd be able to call it into the CSS:
#app/assets/stylesheets/application.sass
.bottle
background-color: <%= Option.find_by(title: "color").value %>
This will give you access to the value stored in our fictitious model... however, it would not update on the fly (IE form submit).
Whenever you push your code to "production", Rails will expect to "precompile" the assets.
Precompilation is where all the assets are concatenated into single files (typically application.css). This process makes your assets static. Indeed, SASS / SCSS are just preprocessors for this process (they run before the minifier).
Whilst you can make your assets dynamic in production (as they are in dev), it drastically slows down your web app (it has to compile the assets for EACH call).
--
To resolve your issue, you'd best put your custom styling either into the <head> of the page, or inline on one of the elements:
#app/views/layouts/application.html.erb
<head>
<style>
.bottle { background-color: "<%= Color.find_by(name: 'bottle').value %>" }
</style>
</head>
...or...
<%= content_tag :div, style: "background-color: #{color.background-color}" %>
No, I don't like it either, but if you want dynamic values, that's what would have to be done. There are some alternatives, but you'll have to hack them together from the backend.
I am following Michael Hartl's Ruby on Rails tutorial currently but decided to work with the newest Twitter Bootstrap 3. I am just experimenting around with the grid system but I can't seem to get the cols, no matter if it is col-sx-, col-sm-, col-md- or col-lg- to appear beside each other. I am using the sass-rails 4.0.1 gem and bootstrap-sass 3.0.3.0.
Here's my code:
<div class="container">
<div class="row">
<div class="col-md-1">
<h1>L</h1>
</div>
<div class="col-md-1">
<p>HH</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<h1>LOGO</h1>
</div>
<div class="col-md-7">
Some Link
Some Link
</div>
</div>
</div>
and this is how it is rendered: http://imgur.com/oCemGWS
How do I get the columns to appear beside each other as they should?
Your HTML code is correct from Bootstrap's perspective, so your problem is most likely coming from how you load the bootstrap library.
Do you have access to other Bootstrap features?
If yes, then check if you're not overriding the .row class with another library (jquery-ui for instance).
If no try one of these:
Check if your scss/sass stylesheet has #import "bootstrap"; (needed for bootstrap-sass to work as indicated its manual)
Try to load Bootstrap locally: place the bootstrap.js and bootstrap.css files in vendor/assets/javascripts and vendor/assets/stylesheets and add them in your application.js file (//= require bootstrap) and in your application.css file (*= require bootstrap)
Bootstrap is a 12-column grid system. Each row is gowing to have to add up to 12. You have (2) 1 Columns stacked on a 5 and 7. The sum of 5 and 7 is 12. By the looks of it, you're trying to have a nav bar.
Checkout the bootstrap examples on how this works:
http://getbootstrap.com/css/#grid
Here is a decent example of a starter template from Start Boot Strap
http://startbootstrap.com/landing-page
Here is the index file:
https://github.com/IronSummitMedia/startbootstrap/blob/master/templates/landing-page/index.html
Check out the nav-bar. Also notice how each row or container adds up to 12?
I'm pretty new to coding, so please pardon my inexperience.
I'm currently working on making a website, and want to have button modals. I can't seem to get it working, and have experimented with it for at least a few hours. This is what I have written in my html file, which was taken from the Twitter Bootstrap site:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Am I missing something here? Do I need add something else? The bootstrap site said to "call the modal via javascript", but I didn't know where to put the $('#myModal').modal(options). I placed it in the .html AND the .js file, but neither attempt worked.
The .html file already has
<script src="js/bootstrap-modal.js"></script>
along with all the other plugins, but this doesn't seem to be doing anything. It's also worth noting that I am working locally on my computer.
I'm sure this is a very easy question, but ANY help would be greatly appreciated.
EDIT:I managed to get it working. Looked like my problem was that I was sourcing bootstrap-modal.js, when really I only had bootstrap.js. I made a new file called boostrap-modal.js with the code, and it worked fine.
However, I'm still unable to get the fade in transition. I've used the bootstrap-transition.js files but still can't seem to get it down. Additional help would be greatly appreciated.
* Updated the bootstrap stylesheet path on the fiddle, it changed since I wrote this answer.
You need to include the jQuery script before the bootstrap-modal.js script file for the plugin to work, here is the script straight from googles CDN that you can include freely in your page, just make sure to include it before any js that you might have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
You only need to call the script if you want it to display when your page loads, otherwise you just need to have the proper data-* attribute and href reference in your modal button which you already have:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
You can include all scripts at the end of your <body> tag for faster content loading, the same way the twitters bootstrap demo page has it.
Here is a demo of a modal page:
http://jsfiddle.net/3v2zg/626/