-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I'm trying to change the style of a borderlayout. For the south component I'm displaying a List, if this list is empty I want to have the default design, if it has content i want to use red-to-red gradient instead.
So i tryed it via style which is not possible. If i reload the page the south has the style for around 0.5 sec then its overwritten by the default z-class.
From the documentation /wiki/ZKStyleCustomizationGuide/LookandFeelCustomization/PartialcustomizewithSclassand_Zclass
I got the idea of adding a s-class to particially overwrite the z-class, to be specific the .z-south-header. This workes fine, the problem is all other south headers in other borderlayouts look like the changed style. So I'm asuming the overwriting is for all borderlayout south in the whole project.
Is it possible to change the style of a single south component (south and inner header) and then revert it if my list of entries is empty?
I can't find examples of stylings like that so it would be nice if someone who knows about css styling components and overwriting style classes could explain this to me, maybe even give a small example.
Currently using this in .zul:
<south id="customSouth" size="30%" title="Hints" sclass="z-south-header" > </south>
And this in Java:
South s = (South) getFellow("customSouth");
if(list == null || list.isEmpty()) {
s.setSclass(".z-south-header");
} else {
s.setSclass("");
}
With this css class:
.z-south-header {
font-size: 14px;
font-weight: bold;
background: #e60000;
background: -webkit-linear-gradient(#e60000, #ff4d4d);
background: -o-linear-gradient(#e60000, #ff4d4d);
background: -moz-linear-gradient(#e60000, #ff4d4d);
background: linear-gradient(#e60000, #ff4d4d);
}
FIDDLE1: with script tag and overwrite that works in local project but not in zkfiddle no direkt link due to karma: zkfiddle.org/sample/b4lmea/11-Suzus-Style-Fiddle
NOTE: this changes all south headers instead of the one which i only want to change.
FIDDLE2: using style attribute (DOES NOT WORK). This is what I want. The problem is: won't apply to the header of the south component and even if it works on the south itself it will change back to default style after ~0.5 sec.
zkfiddle.org/sample/b4lmea/19-Suzus-Style-Fiddle
You can also do it with <south sclass="myOnlySouth"> in the .zul and a CSS file that includes:
.myOnlySouth .z-border-header { font-size: 14px; font-weight: bold; background: #e60000; background: -webkit-linear-gradient(#e60000, #ff4d4d); background: -o-linear-gradient(#e60000, #ff4d4d); background: -moz-linear-gradient(#e60000, #ff4d4d); background: linear-gradient(#e60000, #ff4d4d); }
Asked: 2016-10-27 13:18:44 +0800
Seen: 25 times
Last updated: Sep 24 '18
Try to add !important for each style line
chillworld ( 2016-10-27 14:38:24 +0800 )editHi chillworld, I forgot to mention it but i already tryed it without success. The z-class partial overwrite with sclass attribute works fine. But thats not what I want.The problem is that the other south components in the project look like .z-south-header overwrite but i just want to edit one south.
suzuha ( 2016-10-27 15:28:26 +0800 )editCould you create a fiddle, I can play with that tomorrow
chillworld ( 2016-10-27 15:30:25 +0800 )editI created 2 fiddles the first is the version that uses a css class which overwrites default behaviour. Second is what i would like to use.
suzuha ( 2016-10-27 20:29:43 +0800 )editonly the header correct, not the whole south?
chillworld ( 2016-10-28 06:32:11 +0800 )edit