Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
Is there a way I can mix html and zk components? When I try doing that, the html text does not flex and is cut off from the window. I am sure that there are ways to rewrite the entire html using zk components but for sake of simplicity is there a way I can stick to html and enable resizing/flexing to work as expected?
The html paragraph is cut off in the below example. You can test this here
Please see the code below:
<zk xmlns:html="http://www.w3.org/1999/xhtml">
<vlayout hflex="1">
<hlayout hflex="1">
<button id="help">Help</button>
<html:div>
<html:p>
We will use the email address you provide to send you password
reminders, requests for ownership changes, and we may send you
announcements about the application. We will not share your email address
with anyone. We do not verify that you own the email address
you provide.
</html:p>
<html:ol>
<html:li>abc</html:li>
<html:li>abc</html:li>
<html:li>abc</html:li>
</html:ol>
<html:a href="http://google.com">Google</html:a>
</html:div>
</hlayout>
</vlayout>
</zk>I am not sure if this is a bug. I am wondering if it is more appropriate to post it as a feature request?
Another example is here
Again, the html text is cut off when the parent component is hlayout. See code below:
<zk>
<hlayout hflex="1">
<html><![CDATA[
Sample <b><font color="#008BB6">Shopping Cart</font></b> Table in Plain HTML
<ul>
<li>Productivity</li>
<li>Security</li>
<li>Performance</li>
<li>Totally Control</li>
<li>Auto Testing</li>
<li>Scalability</li>
<li>Flexibility</li>
</ul>
<p>
We will use the email address you provide to send you password
reminders, requests for ownership changes, and we may send you
announcements about the application. We will not share your email address
with anyone. We do not verify that you own the email address
you provide.
</p>
]]></html>
</hlayout>
</zk>
Thanks,
Sony
Hi Richard,
Thanks for the quick fix. But adding the style attribute creates a lot of extra space between components. Is there a way to maintain a more compact layout design?
See: http://top.cs.vt.edu:8080/editionbuilder/src/zul/testhtml3.zul (The text is not cut off but lot of extra space)
See: http://top.cs.vt.edu:8080/editionbuilder/src/zul/testhtml2.zul (The text is cut off but the layout is more compact)
Is there a way to achieve both text resizing and compact layout?
Thanks,
Sony
The links you provided are to localhost so I can't see them, but I looked at the code in Sandbox. The space you mention is not between components, it's between DOM elements. You can fix this up through CSS. Cheers, Richard
You might want to try adjusting the line-height, style="line-height:16px"
It is a bug. Please follow it at ZK-477.
Workaround:
Add style="white-space: normal" to html:div
<hlayout ... <button ... <html:div style="white-space:normal">
Asked: 2011-09-26 20:39:44 +0800
Seen: 1,439 times
Last updated: Oct 04 '11
