Rest Api http://localhost:8091/zine/admin/index leads to this page src\main\resources\templates\admin\index.html.
Here is the code in Thymeleaf , admin/index.html:
<div class="card__header card__header--img" style="background-image: url("#{/admin/demo/img/note.png}"); height: 250px;"></div>
Resources folders:
It's absolute path which you can see : src\main\resources\static\admin\demo\img\note.png
But seems won't work with this code :
style="background-image: url("#{/admin/demo/img/note.png}"); height: 250px;"
Can anyone help me with this?
Good Now.
<div class="card__header card__header--img" th:style="'background-image:url('+#{/admin/demo/img/note.png}+'); height: 250px;'"></div>
A warning came out:
Just ignore it.
Probably someone has even better solution, please share.
Related
I would like to know what's the effect of "ui-g-nopad".
I see it a lot in the code of an application and I can't understand what it does exactly, cause the result is always the same if I put it or not.
<div class="ui-g ui-g-nopad">
...
</div>
I read doc (https://www.primefaces.org/showcase/ui/panel/grid.xhtml) but it's not really explicit neither...
Thank you for your help.
from the primeng.css file:
.ui-g-nopad {
padding: 0;
}
This means it uses CSS to set padding to zero.
You can see it here. Does anybody have any ideas why this might be happening?
http://www.tombalding.com
You can see it at the top.
I found the answer, you have the code twice in your html, delete one and you'll be fine ;-)
I mean this one: <img src="https://www.google.com/images/cleardot.gif" class="goog-te-gadget-icon" style="background-image: url(https://translate.googleapis.com/translate_static/img/te_ctrl3.gif); background-position: -65px 0px;">
Hope I helped!
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
I have a gallery plugin. If I click on another image, or in a arrow, a popup will appear.
The problem is that whem the popup is opened, the plugin gallery moves down on the page.
What is the css problem?
How can I fix it?
here my plugin:
http://judopassion.com/wordpress/?p=274
Thanks a lot.
There's quite a lot going on here, so I'll try and simplify the steps you need to take.
<div id="box">...
Needs to be a child of
<div id="gallery-1">....
So you would have:
<div id="gallery-1">
<div id="box"></div>
</div>
Add position:relative; to gallery-1.
Your #box styles are really, really messy. You need to delete left: and top: instructions from the CSS for #box.
I have added top property on pop-up appearing, and removed it when is closed:
$("gallery-1").css("top","-xxem");
I can't use GeorgeBuckingham solutions, because the plugin don't not allow it. Thanks anyway.
I have this fairly unusual problem (after what I've understood when asking others), it seems that my -tags don't understand how much of the screen that is used by other elements, and therefore push elements out of screen.
I thought it might had something to do with the use of position:fixed, but it didn't seem to solve it when removing the position-part at all.
This is the main markup that seems to have problems, in wich I really can't seem to see any errors.
<div id="search">
<div id="searchfield">
<span id="searchinput">
<input type="text" id="s" name="s" />
</span>
<button>Search</button>
</div>
<div id="searchresults">
<ul class="longlist">
</ul>
</div>
</div>
The problem is best seen in this jsFiddle where it seems #searchresults is pushed out of #search by #searchfield.
As I really don't know what's the problem, any attempt on using Google have left me with no good answer to where my problem really is.
I have tried removing any JS that modifies the at all, and as we can see the jsFiddle does not run any JS at all, and still my markup/CSS does not work.
The height of #search is set to 400px in this fiddle to show the flaw better. But the same error occurs when it's 100% (wich is the value it should have in production-code).
Does anyone have any idea why this is happening?
This is caused by an overflow problem. The div "#searchfield" is pushing down the other content.
Setting the height to "auto" by removing the line "height: 400px;" on "div#search" and set a fixed height on "div#searchresults" fixes the problem.
#search{
height: 400px;
}
Taking the "div#searchfield" outside of the "div#search" also works.
<div id="searchfield">...</div>
<div id="search">...</div>
These methods show that the overflow problem is caused by mixing relative and absolute heights. You should move some of your styles relating to height from "div#search" into "div#searchresults" to fix this.
It seems to work at
#search{
height: 100%;
}
no?
link:
http://jsfiddle.net/KX9BV/8/