I am running with an Issue while integrating this gem, In THIS url there is a section that says:
iCheck includes several skins, most of them with multiple color schemes. Include them like this:
#import 'icheck/square/blue'
#import 'icheck/square/green'
I tried to add above line in end of app/assets/stylesheets/application.css but the style are not effecting. Behind the scene Javascript is working fine and it rendering below given HTML:
<div class="icheckbox_square-blue" style="position: relative;">
<input type="checkbox" data-color="blue" data-skin="square" class="icheck-me" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins>
</div>
To make iCheck gem work in Rails 4 follow every thing that's mentioned in THIS URL but do the below changes that I did to run it successfully:
Don't import in your stylesheet the way iCheck Gem doc say:
#import 'icheck/square/blue'
#import 'icheck/square/green'
In your application.css - add it this way:
*= require icheck/square/blue
*= require icheck/square/green
Related
How can i have the subscribe counter button like this site (http://atomsforpeace.info/) on the right on the top?
This is not the right embed code. It should be
<div class="g-ytsubscribe" data-channel="CHANNELNAME"></div>
<script src="https://apis.google.com/js/plusone.js"></script>
Read more here iframe www.youtube.com/subscribe_embed? google plus
Viewing the source of their page gives you the code they've used:
<iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 147px; margin: 0px; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" src="https://www.youtube.com/subscribe_embed?bsv&usegapi=1&channel=[YOUR CHANNEL NAME HERE]&theme=dark&hl=en-US&origin=http%3A%2F%2F[YOUR HOSTNAME HERE]&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.Hm9QrP5wPuw.O%2Fm%3D__features__%2Fam%3DEQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTOJmMfO7AjAhJbN5yM-BshnzKg53Q#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Conload&id=I0_1371683853533&parent=http%3A%2F%2F[YOUR HOSTNAME HERE]&rpctoken=33681162" data-gapiattached="true"></iframe>
(make sure you substitute for the [YOUR CHANNEL NAME HERE] and [YOUR HOST NAME HERE] blocks)
I have two .scss documents with the following sample code:
tables.scss:
#mixin ftable {
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
}
page.scss:
#projects-listing {
#include ftable;
}
They are required in this order from application.scss:
*= require ./tables
*= require_tree ./partials
where the partials directory contains my page.scss file.
When I load the page, i'm getting an undefined mixin ftable exception.
If you want to use Sass mixins (including compass) you need to use the sass #import function rather than the manifest style require function.
Try this instead in application.css.scss:
#import 'tables'
#import 'page'
#import 'any other files you have'
Order is important - those files with mixins need to be imported first before the files which would use the mixin.
In my application.css file I am encountering errors when I have my code inputted below. The h1.title code will execute but the h1 code will not. It may be worth mentioning that in my application the h1.title is above the h1. However, I can get it to work if I insert the h1 code directly after the h1.title code (Repeating myself with the h1 snippet). I don't want to do this as I would like to keep my code DRY. This seems trivial but I have wrestled quite a bit with it and made no progress.
h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
width: 98.5%;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}
If you add the code directly in application.css, it will appear at the top of the compiled file (I assume your css files are compiled into one). My guess is that other css files included in your application.css overwrite h1 css atrributes.
Use inspect option in your browser (IE, Firefox, Chrome etc. have one built in nowadays) and see where the h1 gets it's attribute values from.
I am trying to click on a link using webdriver but it throws me a ElementNotVisibleException saying "Element is not currently visible and so may not be interacted with"
My WebDriver code:
addProgram.click();
addProgram refers to an anchor element. This is populated by annotating #FindBy(how= How.LINK_TEXT, using="Add Program"). In other words it is similar to driver.findElement(By.linkText("Add Program")).
My HTML is:
<div class="form_btn">
<a href="/program/addProgram">
<span>Addrogram</span
</a>
</div>
It starts working when I remove the css declaration from the above div. The dive has a hover style, may be that is the one causing the problem.
CSS:
.form_btn {
float:left;
background:url(/bg_button_right.gif) no-repeat scroll top
right;
color: #fff;
display: block;
height:22px;
font: bold 10px arial;
margin-right: 0px;
margin-top:2px;
padding-right: 4px; /* sliding doors padding */
text-decoration: none;
}
.form_btn span {
background:url(/assets/images/provider/bg_button_left.gif) no-repeat;
display: block;
float:left;
line-height:18px;
padding: 2px 5px 5px 10px;
font-size:11px;
}
.form_btn a{
color:#fff;
}
.form_btn a:hover{
color:#fff;
text-decoration:none;
cursor:hand;
}
I have trawled the web trying to find a solution but none has worked. Any suggestions/help is greatly appreciated.
Thanks,
Chris.
(UPDATE) This issue was resolved and should be available since Selenium 2.4.0
Sounds like you ran into the same bug as I did:
http://code.google.com/p/selenium/issues/detail?id=1445
the work-around is to get the element inside the link and click.
re-writing your code:
driver.findElement(By.linkText("Add Program")).findElementBy(By.tagName("span"))
I just solve this error while using capybara in ror project by add " Capybara.ignore_elements = true " to features/support/env.rb
Working from #Zernel's solution, the following solves for ror project using capybara.
Add Capybara.ignore_hidden_elements = true to the file config/environments/test.rb
Using texts is not always the good methodology.
Try this:
driver.findElement(By.cssSelector("div.form_btn > a[href*='addProgram'] > span")).click();
Always Use CSS, It performs better than XPath.
I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin