I try to replace
<div sec:authorize="hasRole('ADMIN')"></div>
by
<div sec:authorize="hasRole(${T(com.mypackage.Role).ADMIN.getText()})"></div>
but it does not work. Then I tried
<div th:with="role=${T(com.mypackage.Role).ADMIN.getText()}" sec:authorize="hasRole(${role})"></div>
and with preprocessing
<div th:with="role=${T(com.mypackage.Role).ADMIN.getText()}" sec:authorize="hasRole(__${role}__)"></div>
but is still not working.
Something like this should work:
<div th:if="${#authorization.expression('hasRole(''' + T(com.mypackage.Role).ADMIN.getText() + ''')')}">
</div>
(I don't think the sec: attributess interpret Thymeleaf expressions same as other tags... at least I couldn't find any examples of it.)
<div sec:authorize="hasRole(T(com.mypackage.Role).ADMIN)"></div>
Thanks #ChetanAhirrao
Related
I would like to insert the image that I downloaded instead of using url, how could I do? I've this code:
<div class="..." style="background-image:url=(http://www.example.com);"></div>
I would like to declare the image, like this: assets/image/pic.jpg
I've tried to does:
<div class="..." style="background-image:src="assets/image/pic.jpg"></div>
But doesn't work!
It's possible?
The correct syntax would be:
<div class="..." style='background-image: url("assets/image/pic.jpg")'></div>
Assuming that the path is correct, this should work. For more information please check out the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
According to w3c's documentation, no, you can't use any other than URL to specify background-image's source
background-image: url|none|initial|inherit;
You should remove the = symbol next to url in your url=(http://www.example.com) and it should work.
<div class="background" style="height:400px; width:400px;background-image: url('http://lorempixel.com/400/400/cats/')">
</div>
in the css divert url and at the end of the instruction use the;
Try with
<div class="..." style="background-image:url(assets/image/pic.jpg);"></div>
I need to create a UIKit grid like this:
This is my code:
<div className="uk-grid uk-grid-collapse">
<div className="uk-width-5-8">
<div className="uk-grid">
<div className="uk-width-1-2">.Variable..</div>
<div className="uk-width-1-2">..Modelo.</div>
<div className="uk-width-1-2">..Mes.</div>
<div className="uk-width-1-2">..Escenario.</div>
</div>
</div>
<div className="uk-width-1-8">BUSCAR</div>
<div className="uk-width-2-8">RANGE</div>
</div>
I've followed the example on https://getuikit.com/docs/grid.html (Nested Grid) but I can't get it, this is what I got:
Any tip? Could be fault of another css? I'm using an html template based on UIkit.
UPDATE: When I remove this width I got what I need:
But I can't edit that source, there must be another way to do it. Adding width inline won't work.
Excuse me, but please remove className from your html, use class instead;) And it seems that theres no 5-8ths in grid docs neither in src folder(have looked, but couldn't find)
<div th:if="${tblUserList != null}">
--content--
</div>
The above thymeleaf code is not working, where tblUserList is a list. So I want to check whether the list is empty instead of checking its null. How to do that?
You can do as follows:
<div th:if="${not #lists.isEmpty(tblUserList)}">
--content--
</div>
With Thymeleaf 3.x.x you can validate list more elegant:
<div th:if="${tblUserList!=null and !tblUserList.empty}"></div>
or
<div th:if="${tblUserList!=null and !tblUserList.isEmpty()}"></div>
Or simply:
<div th:if="${!myList.empty}">
Instead of negating you could use thymeleafs inverted if unless
<div th:unless="${myList.empty}">
Suppose I have a hierarchy like this:
<div class="first_level">
<div class="second_level_1">
<div class="third_level_1">
<div class="fourth_level_1">
<ul><li></li><li></li></ul>
</div>
<div class="fourth_level_2">
<div class="fifth_level_1">
</div>
<div class="fifth_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
</div>
</div>
<div class="second_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
I want to select all those divs, which contain at least one ul in them. So in the above example code, that would be divs second_level_2, fourth_level_1 and fifth_level_2 ..
What CSS selector can I use to get this result ?
EDIT:
If it's not possible with CSS alone, you can suggest answers using JavaScript, although due to the nature of my actual code, I would really like to avoid that if possible ..
jsfiddle
Here are two options - both have downsides, but you can consider them:
You can either manually add a second class to the divs with a ul:
<div class="fourth_level_1 div_with_ul_class">
Note: If you are using some dynamic language on the server, such as PHP, this could actually be implemented fairly easily, without manual coding.
Or if you want to be dynamic I recommend jQuery:
$("div > ul").parent().addClass("div_with_ul_class");
Parent selector isn't available in CSS, despite a lot of requests to add it.
jQuery has a nice selector, know as :has; http://api.jquery.com/has-selector/
$('div:has(ul)');
Would be the jQuery selector.
I just discovered zen-coding.
I have the following snippet of code I want to generate.
<div id="base">
<div id="header">
<div id="logo"></div>
</div>
<div id="body"></div>
<div id="footer"></div>
</div>
Is there a way to do this with one line of zen-code
I know I can write
div#base>div#header>div#logo
this is where I get stuck, cause I don't know, how I can go back and add body and footer divs(siblings of header).
I want to figure out if/how this can be done in one line.
Thanks! :)
This works for me with ZenCoding for Notepad++
div#base>(div#header>div#logo)+div#body+div#footer
addition to Jonathon Bolster's answer:
other trick for climb up parent tag / tree:
you can using operator
circumflex accent: ^
from emmet ( successor of zencoding )
source:
http://docs.emmet.io/cheat-sheet/
or you can using
less than symbol: <
from sparkup ( fork of zencoding )
source:
https://github.com/rstacruz/sparkup