Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello Please how to change the size (width, height) of a notification ?
books.zkoss.org/images/0/07/ZKDevRef_UIPattern_UsefulJavaUtil_Clients_showNotification01.png
.z-notification .z-notification-content {
background: none repeat scroll 0 center transparent;
font-size: 14px;
font-weight: normal;
margin: 0 !important;
overflow: hidden;
background-color: #f78d1d;
color: white;
width: 300px;
min-height: 53px;
}
.z-notification .z-notification-content { background-color: #f78d1d; }
Hi,
the answer is simple: do it with CSS (I am not a CSS experts but some basics never hurt). Chrome has great tools to easily identify the style rule that defines the appearance or an element. I recorded a small video how to do that yourself.
You can see that I first inspect the element, then check which classes it has applied and then on the right side I can already change them to preview if my changes have any effect. Then I add those style rules to my page add my specific overrides and voila: the size changes for all those notifications of the same type.
Regards,
Robert
The html id of the notification it slef, i have many notifications in the page, and i will specify the css of each notification, for example : notification 1 of type info have a different style than another notification of the same type, info, "are you understanding what i will to do ?"
aloulen ( 2014-06-13 12:55:56 +0800 )edityour explanation still leaves a lot room for speculations. however maybe it helps: if you look at the DOM of your page you'll see that the notifications have generated IDs regenerated every time a notification is shown. so you cannot go by the ID. also the notifications are no direct child of the..
cor3000 ( 2014-06-16 02:27:30 +0800 )edit... the widget they are rendered for. you could define an alternating style using e.g. '.z-notification:nth-child(2n+0) {border: 1px solid red}' or you'd need to use java script to get the widget the notification belong to and determine the style dynamically.
cor3000 ( 2014-06-16 02:30:44 +0800 )editAsked: 2014-06-12 12:13:52 +0800
Seen: 67 times
Last updated: Jun 13 '14
