I've the following style in a css file:
.sectionDivider {
background-image: url('#{resource['default:../img/dashes.png']}');
background-position:center; width:100%;
background-repeat: repeat-x; height: 1px; overflow: hidden;
}
When running my app, I'm getting this EL expression error:
Cannot evaluate EL expression resource['default:../img/dashes.png'] in resource default:css/it.css
Can't spot what I did that is wrong.
Related
I am trying to deploy the grails 3 web app using war command. Development version shows proper style sheet and after deploying on production server its just messes everything up .as css and JavaScript are minified i cant really figure out the problem ....example in the image development version
production version
I am using above code to display tab and below css..
#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:100%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background: url(../images/tableftF.gif) repeat-y;;
margin: 1px;
padding:0px 10px 0px 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background: url(../images/tabrightF.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
#tabsF #current a {
background-position:0% -42px;
}
#tabsF #current a span {
background-position:100% -42px;
}
<div id="tabsF">
<ul>
<li><span> Viewer1 </span></li>
<li><span> Viewer2 </span></li>
<li><span> Viewer3 </span></li>
</ul>
</div>
You can see the CSS rules in Firefox developer tools for chrome developer tools
If you want you can disable the css/js minifation as shown below. And build the war and see if the issue still exists that way you can make sure if its the problem with minifaction or problem with your code. And once u have isolted and fixed the problem enable it again.
//build.gradle
assets {
minifyJs = false
minifyCss = false
}
I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px".
All other browsers display it correct.
I've been going through the computer styles one by one but can't find anything.
Its instantiated with the common:
$("#mainlanguage").selectmenu();
And the select box which jQuery uses has basic styling on it. (SCSS)
jquery ui language !select
.mainSearch{
.ui-selectmenu-button {
background:$upsbrown;
outline-style:none!important; // reset
&.ui-state-hover{
border:0;
border-radius:0;
}
border:0;
border-radius:0;
left: 63.3%;
span{
background-color: $upsbrown;
background-position: 93.5% center;
//border-top: 1px solid $navtext;
color: $navtext;
font-size: 11px;
line-height: 18px;
position: relative;
padding-left: 6px;
max-width: 151px;
height: 21px;
z-index: 400;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
}
}
Should I be able to use EL in css to access an img in the resources folder of a jsf 2 app? It does not seems to be working. In my css I've below:
.sectionDivider {
background-image: "#{resource['default:img/dashes.png']}";
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
When I access the page thru the browser, the background-image is not showing. When I view the CSS using browser Developer tools, the CSS looks like below (The background-image is missing):
.sectionDivider {
WIDTH: 100%; BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: center 50%; HEIGHT: 1px; OVERFLOW: hidden
}
I found the problem. I forgot to put url() in the background-image style. I changed to do below and it is working now:
.sectionDivider {
background-image: url('#{resource['default:img/dashes.png']}');
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
I've a CSS question. I'm using Rails 3.0 and trying to design a site of mine. I found this anoying problem previously also but now is the time to find a solution.
The situation: I set up a CSS like this:
* {margin: 0;padding: 0;}
body {background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
a {color: blue; outline: none; text-decoration: underline;}
a:hover {text-decoration: none;}
p {margin: 0 0 18px}
img {border: none;}
input {vertical-align: middle;}
#wrapper {width: 955px; margin: 0 auto;}
/* Header
-----------------------------------------------------------------------------*/
#header {background: transparent url(../images/header.jpg) no-repeat; height: 413px;}
#navigation {background: transparent url(../images/menu_bg.jpg) no-repeat; height:36px;}
/* Middle
-----------------------------------------------------------------------------*/
#middle {width: 100%; height: 1%; position: relative;}
#middle:after {content: '.'; display: block; clear: both; visibility: hidden; height: 0;}
#container {background: transparent url(../images/main_bg.jpg) no-repeat; width: 100%; float: left; overflow: hidden;}
#content {padding: 0 270px 0 0;}
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {float: left; margin-right: -3px; width: 313px; margin-left: -313px; position: relative;}
/* Footer
-----------------------------------------------------------------------------*/
#footer {background: transparent url(../images/footer.jpg) no-repeat; height: 63px;}
/*Content
-----------------------------------------------------------------------------*/
#prediction_box {width:290px; height:200px; position:relative; background-color:#392b3f; border: 1px solid #000; margin: 25px 25px 40px 40px;}
When I start to write something on my index page, this wont be 12px Arial as I set in the body tag. The wierness starts if I wan't to have the text in white.
body {font-color:#fff; background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
If I use the font-color:#fff; than nothing happens. However if I use font: #fff 12px/18px etc... than suddenly the texts will be Arial 12px but still in black!
Can you explain how is this possible?
Looking forward your answears,
Kael
CSS does not define a font-color property. You'll need to use the color property as so: color: #fff; in order for the foreground colour (font colour) to become white.
I have a simple scaffold rails application that is doing validataes_presence_of.
The validation is making each textfield bordered. I just want the error messages to be displayed on top.
How can I make these type of changes or color changes to the validation
Rails applications store their CSS in [application_root]/public/stylesheets. A new rails app will have a file called default.css in this directory. This file contains the following:
#errorExplanation {
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#errorExplanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}
#errorExplanation p {
color: #333;
margin-bottom: 0;
padding: 5px;
}
#errorExplanation ul li {
font-size: 12px;
list-style: square;
}
If you play about with the values of some of the parameters here - in particular border - you might find something that looks more to your taste.
Have you checked rails guide about validation errors?
I would suggest having a look at Formtastic. Easy to setup, works great with scaffold-type apps and has some nice clean HTML and CSS.