I am working on a Rails 3.1 Application, and it contains a third party JS Calendar Picker (jsDatePick). jsDatePick has a whole stack of images that are in images/calendar/img/.
Running rake assets:precompile precompiles them all, but the library still looks for the images in images/calendar/img (not assets/calendar/img). I could change the directory to assets/calendar/img, but it doesn't append the fingerprint hash.
Thoughts on how to resolve an issue like this?
Here is a sample of some of the CSS that goes along with this JS lib:
.JsDatePickBox .boxLeftWall .leftTopCorner{ margin:0; padding:0; width:7px; height:8px; background:url(/assets/calendar/img/boxTopLeftCorner.png) left top no-repeat; overflow:hidden; }
.JsDatePickBox .boxLeftWall .leftBottomCorner{ margin:0; padding:0; width:7px; height:8px; background:url(/assets/calendar/img/boxBottomLeftCorner.png) left top no-repeat; overflow:hidden; }
.JsDatePickBox .boxLeftWall .leftWall{ margin:0; padding:0; width:7px; background:url(/assets/calendar/img/boxSideWallPx.gif) #ffffff left top repeat-y; overflow:hidden; }
While I definitely see a problem here (asset tags should be used, as these images don't exist in the asset folder without the fingerprint hash), some of the images I am specifically looking for are not in any CSS file in the application. I'm looking now to determine where they are being called.
It looks like the other images are applied via the javascript. Here is an example:
if (parseInt(aDayDiv.getAttribute("isToday")) == 1){
this.setC(aDayDiv, "dayDownToday");
aDayDiv.style.background = "url(" + this.oConfiguration.imgPath + this.oConfiguration.cellColorScheme + "_dayDown.gif) left top no-repeat";
} else {
this.setC(aDayDiv, "dayDown");
aDayDiv.style.background = "url(" + this.oConfiguration.imgPath + this.oConfiguration.cellColorScheme + "_dayDown.gif) left top no-repeat";
}
The oConfiguration.imgPath is defined as such:
g_jsDatePickImagePath = "/assets/calendar/img/";
this.oConfiguration.imgPath = (g_jsDatePickImagePath.length != null) ? g_jsDatePickImagePath : "/images/calendar/img/";
Thank you for your help.
The answer is to upgrade to Rails 3.1.1+ (I upgraded to rails 3.1.2) and the issue is resolved by Rails running rake assets:precompile:nondigest which results in nondigested versions of assets.
Related
i'm using the ion-select => ion-option as an input for my ionic 3 project. It gives an alert on selection, however the font-size of the alert body is really small and i have tried all sass options to increase its font-size all in vain. I have tried using .alert-md,.alert-tappable. Is there any way i can increase this font.
.scss
.ios, .md {
page-add-stock {
/*.alert-md .alert-checkbox-label{
}*/
.alert-radio-label {
font-size: 3rem;
}
}
}
.html
<ion-select [(ngModel)]="category" formControlName="category" >
<ion-option>Pesticides</ion-option>
<ion-option>Seeds</ion-option>
<ion-option>Herbicides</ion-option>
<ion-option>Fertilizers</ion-option>
<ion-option>Farming tools</ion-option>
</ion-select>
Html ion-select that generates the alert, just in case.
I cannot find any Ionic Sass variable related to the labels (I found one for the message, the title and the subtitle of the alert, but not for the labels), so you can always use a css style rule to set the right font-size:
.alert-radio-label {
font-size: 3rem;
}
The default is font-size: 1.6rem; for Android, and font-size: 1.4rem; for iOS.
UPDATE
Please notice that the alert html element is outside the page, so that style rule should be placed in the app.scss file.
I cant find any related solution to my problem here on stack over flow but here we go. i have checked footer space and marked related module with zero spacing for slide but still it is not working.
Please see www.sateeni.com and under main homepage slider i have some unwanted space and don't know why its there. Please need help to find out why and where the problem is. sorry if its very basic thing but i am new to magento so cant figure out the reason. I have tried all options but no luck.
Thanks in advance.
Adam
Your main content container is showing and even though it is empty, the CSS has padding and a minimum height:
.main {
padding: 20px 0;
min-height: 370px;
}
You can either use CSS to overwrite this min-height on the homepage only
.container.full-width {
padding: 0;
min-height: 0;
}
or just hide this element on the homepage only.
.container.full-width {
display: none;
}
Is there an easy way to use "#-moz-document url-prefix()" to target Firefox in SCSS documents.
I have tried the following, but the parent reference "&" does not work in this context.
#nav li{
display: table-cell;
#-moz-document url-prefix(){
& {
display: inline-block;
}
}
}
I run into little issues like that from time to time. I mainly use this technique to fix IE8. Here's my fix:
First I install: https://github.com/rafaelp/css_browser_selector
This gives me browser and rendering classes for each browser:
<html class="gecko firefox firefox26 mac">
Then in my SCSS, I can do this:
.foo{
display: block;
.firefox & {
display; none;
}
}
This example hides .foo in Firefox. Using a & after the selector looks back up the tree. Isn't SASS awesome?!?!?
Alternatively, install the script and create a separate firefox.scss and just start it like so:
.firefox {
// Do stuff here
}
As a rule, feature-detection using something like Modernizr is easier than playing to specific browsers, but sometimes you need to address various browser issues.
Day one of dealing with Rails 3.1 asset pipelines and defeated!
Here is the latest in a long line of errors thrown out by the assets:precompile on the production machine:
wrong number of arguments (1 for 2) for 'asset_path'
This happens on the application.css file (which I think is the first one it is trying).
This is the contents of my application.css
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. 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_tree .
*/
.account-badge
{
background-color: #B94A48 !important
}
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
.container[role="main"] {
padding-bottom: 300px;
}
.page-footer {
border-top: 1px solid #EEEEEE;
padding-top: 17px;
}
Might be important to mention that I'm using twitter-bootstrap-rails in a brand new app (not upgrade)
Take a look at your bootstrap_and_overrides.css.less file, which gets included by sprockets (*= require_tree) of your application.css file.
I guess the error is located by including the #iconSpritePath or the #iconWhiteSpritePath.
Edit:
The method needs two arguments:
asset-url("rails.png", image) # becomes url(/assets/rails.png)
asset-path("rails.png", image) # becomes "/assets/rails.png"
hope that helps
I have a 'responsive' website but there are some links I only want on 'pc browsers' only and not on 'tablet landscape' becasue they link off to flash objects.
So far this is what I have done but it't not a 100% fix as some android tablets such as 'Lenovo think pad' which have a bigger screen.
I am using media queries to make my site responsive and this is what I'm currently using...
#media only screen
and (max-device-width : 1024px)
and (orientation:landscape)
{
header.Site
{
nav.Site > ul > li { line-height: 2 ; }
div.BidSessionCountdown,
a.LiveOnline { display: none; }
}
}
Is there any CSS fixes you can think of?
Thank you in advance
Tash :D
Using media queries isn't really the appropriate technique to detect if flash is supported or not. My suggestion would be to determine this using JavaScript, and assign a class to the body element such as "no-flash". Your JavaScript might look like this:
//Using jQuery here
if(typeof navigator.plugins['Shockwave Flash'] == 'undefined') {
$('body').addClass('no-flash');
}
Then, your CSS could be as follows:
body.no-flash a.LiveOnline {
display:none;
}
Note: The javascript code that checks the navigator plugin comes from Here.
When you are using the orientation:landscape, you have to consider whether the keyboard popup will change the display, once the width size is larger than the height size, the css will consider it as landscape.