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.
Related
So in my app i have a card where i want to dynamically set the background image via ActiveStorage like so:
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
</div>
however, the image is not visible. Inside chrome i also get in the element.style property "invalid type property" as an error.
If i inspect the card element, the url is loaded like so:
`background-image: url(/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png)`
Taking the url and adding localhost:3000 to it loads the image:
localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png
Rendering the image normally inside an img tag works fine:
<%= image_tag(post.images.first) %>
Also, changingrails_blob_path to rails_blob_url makes no difference at all. The only change is that there is a localhost:3000 added to the url in rails_blob_url:
http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png
Adding a height/width to the card class results also in no difference.
Here is a reference i've found, seems like they are using the same approach as i do: Ruby on rails 5.2 - background image with active storage
Any ideas where the problem might be?
Thanks in advance everyone!
Greetings!
Thanks everyone for all of your input!
I was able to fix it. Just in case someone runs into the same issue:
Add single quotes to your path:
Solution:
<div class="card" style="background-image: url('<%= rails_blob_url(post.images.first) %>'); height: 100px; background-position: center;">
For comparison (before):
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
Double quotes don't work in this example.
This would be probably not even an issue if i just would have used the scss file instead of adding it directly to the div.
Cheers!
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.
Now that applyAuthorStyles is deprecated the font-awesome icons no longer show up. This question how to incorporate font awesome in a dart component? has some useful information but I'm unable to get the untested suggestions to work.
Here is a template from a very simple mortgage calculator component project:
<polymer-element name="plus-payment-schedule">
<template>
<style>
</style>
<fieldset>
<legend>Payment Schedule</legend>
<label><span class="fa fa-calendar fa-fw" style="width:1.5em"></span> Start Date</label>
<plus-date-input id="date"></plus-date-input>
<div class="payment-schedule">
<table id="schedule_table">
</table>
</div>
</fieldset>
</template>
<script type="application/dart" src="payment_schedule.dart"></script>
</polymer-element>
Prior to polymer 0.10.0, using the suggested applyAuthorStyles patch this code worked. Meaning, by applying those font-awesome classes (class="fa fa-calendar fa-fw") the font-awesome icons showed up. I've removed applyAuthorStyles and made other polymer init changes required for the update. The component works fine except the font-awesome icons no longer show up.
When I run this mortgage calculator app and look in the inspector, I see that those classes are applied to the span. So I guess the issue is the definition of the classes (fa fa-calendar fa-fw) is not available?
Any information on how to make this specific scenario work?
The component is hosted here
applyAuthorStyles is deprecated. Thus you have to include stylesheets within <template>.
The problem is that #font-face does not work inside polymer elements at the moment. The solution is to include #font-face in the regular document and to add the classes to your polymer or include font-awesome.css in both places.
This should solve it.
See also:
- https://code.google.com/p/dart/issues/detail?id=18581
- https://github.com/Polymer/docs/issues/434
Regards, Robert
Consider using the Font-Awesome Polymer Iconset or generate your own subset using this generator
You'll be able to use FA in core-icons and other icon based elements, like this:
<core-icon icon="fa:calendar"></core-icon>
There is an element for that.
Use this: https://www.npmjs.com/package/fontawesome-iconset:
get the icons you need from fa-icons.html
put it in a new iron-iconset-svg
import iron-iconset-svg and iron-icon
use it like other iron-icon
You can view how to use here: https://elements.polymer-project.org/elements/iron-icon
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.
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/