Using the ZK framework, no matter what I do this tabpanel will not show itself and just ends up being blank.
<window id="indexwin" height="100%" width="100%" visible="true">
<style src="/css/itb.css" />
<hlayout width="100%" style="padding-right: 3px; text-align: right; overflow: auto" valign="middle">
<div width="260px" style="margin-right: 9px; padding-top: 6px; padding-bottom: 6px">
<button label="Logout" id="logout" sclass="logout-button"/>
</div>
</hlayout>
<tabbox width="99%" height="76%" style="margin:12px;">
<tabs>
<tab label="Anomalies" id="anomaliesTab"/>
</tabs>
<tabpanels>
<tabpanel id="anomalysearchpanel" style="background-color: #ffffff" >
<panel border="none">
<panelchildren>
<borderlayout width="100%" height="100%">
<west hflex="1" title="Search....
I previously had nested (included) windows which were fine but the collapsible panels were not working so I attempted to change. Is there any further information I need to add to
Did some research,
Your code is correct but I'm suspecting a bug.
<window id="indexwin" height="100%" width="100%" visible="true">
<hlayout width="100%" style="padding-right: 3px; text-align: right; overflow: auto" valign="middle">
<div width="260px" style="margin-right: 9px; padding-top: 6px; padding-bottom: 6px">
<button label="Logout" id="logout" sclass="logout-button"/>
</div>
</hlayout>
<tabbox width="99%" height="76%" style="margin:12px;">
<tabs>
<tab label="Anomalies" id="anomaliesTab"/>
</tabs>
<tabpanels>
<tabpanel id="anomalysearchpanel" >
<panel collapsible="true" tiltle=" ">
<panelchildren>
<label value="hey chillworld"/>
</panelchildren>
</panel>
</tabpanel>
</tabpanels>
</tabbox>
</window>
At title is no normal space but a space that counts as a char (alt gr + 255).
I needed to do this cause you the panel header is only visible when a title is set (a normal space doesn't do the trick).
Example of this in the this fiddle.
If you suspect also a bug, you can make an issue tracker at zk for this.
Include the fiddle and mention the difference with no title set.
Related
I have a table with cellTable see the code bellow :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:c="urn:import:com.google.gwt.user.cellview.client"
xmlns:b="urn:import:com.bv.partenaire.graphique.client.ui.button">
<ui:with field='msg' type="com.bv.partenaire.web.client.resources.Messages" />
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<g:HTMLPanel>
<div class="modelBandeau">
<div class="divGauche">
<div class="testClass" style="background-color: green;">
<g:Label styleName="recherche">
<ui:text from="{msg.rechercher}" />
</g:Label>
</div>
<div style="margin-left:10px;margin-top: 1px;">
<g:TextBox ui:field="rechercheBox" />
</div>
</div>
</div>
<table cellspacing='0' cellpadding='0' style='width:100%'>
<tr>
<td valign='top'>
<c:CellTable ui:field="valideursTable" styleName="cellTable"/>
</td>
</tr>
<tr>
<td align='center'>
<c:SimplePager pageSize="10" ui:field="pager" />
</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
the code works fine, my issue is when I have long data in my columns there is no horizontal Scrollbar
I tried to add <g:ScroolPanel> and <g:VerticalPanel> still doesn't work ?
tried to add also some css
table{
display: block;overflow-x: auto;white-space: nowrap;
}
I don't use the DataGrid
Any ideas ?
it works only with CSS, just add the code above and fixed width (950px) and the scrollbar will appear
I create a web page with a listbox and button, the problem is that when page loads, a white space appear at the right of both components, but if resize the page the spaces disappear.
<zk xmlns="http://www.zkoss.org/2005/zul">
<div apply="org.zkoss.bind.BindComposer" viewModel="#id('vm') #init('com.valid.pmngr.product.ProductViewModel')" height="100%" width="100%" style="border: 3px solid red;">
<style src="/css/style.css"/>
<div height="94%" width="100%" style="border: 3px solid orange;">
<vbox vflex="1" hflex="1" style="border: 3px solid blue;">
<hbox align="end" width="100%" style="background-color:#282425; padding: 30px 0px 15px 60px">
<separator height="58px"/>
<image src="/img/Logo.png"/>
</hbox>
<separator height="15px"/>
<grid>
<auxhead>
<auxheader label="Products" zclass="auxheader-g"/>
</auxhead>
<columns />
</grid>
<listbox model="#load(vm.productStatusList) #template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')"
vflex="1" >
<listhead sizable="true">
<listheader label="Name" align="center"/>
<listheader label="Vertical" align="center"/>
<listheader label="Business unit" align="center"/>
<listheader/>
</listhead>
<template name="noneditable">
<listitem>
<listcell>
<label width="98%" value="#bind(each.product.name)" />
</listcell>
<listcell>
<label width="98%" value="#bind(each.product.vertical)" />
</listcell>
<listcell>
<label width="98%" value="#bind(each.product.businessUnit)" />
</listcell>
<listcell>
<button image="/img/edit.png" onClick="#command('edit')"/>
<button image="/img/delete.png" onClick="#command('delete')" />
</listcell>
</listitem>
</template>
</listbox>
</vbox>
</div>
<div vflex="min" style="border: 3px solid purple;">
<vbox hflex="1" vflex="1" style="border: 3px solid black;">
<button label="New" onClick="#command('newProduct')" />
</vbox>
</div>
</div>
</zk>
When page loads in full screen:
1
And after resize:
2
what is the problem?
EDIT
The white spaces appear in chrome, firefox and iExplorer and the version of zk is 8.0.1.1
I edited your fiddle to this. Can you check it out it meets your requirements?
I altered some things, for correctness :
Using spacing attribute in separator in stead of height.
vbox changed to vlayout as the align attribute is absolute here, and vlayout is lighter in generated html.
Removing the width and hflex where it is not needed.
Removing height and vflex where not needed and only set where needed.
I have a html5 form which displays as expected in IE8 and above, also in Chrome, Safari, Forefox and Opera. But in IE7 the label alignment is completely different - the labels are displayed above the input fields rather than to the left of them and horizontally aligned which is what I'm after.
I haven't found this question asked on StackOverflow, but did find something very similar looking on CSS tricks. I did have a link here but as a first time poster my question was rejected due to having more than 2 links in it (due to the additional 2 links below showing screenshots of the issue). So I had to remove it... The answer to the post on CSS tricks gives me some areas to look at, but it's not specific - it says "Figured it out on my own. Solution involved a combination of moving the label tags and some IE conditional CSS."
The difference in display of the form is shown in these screenshots:
IE7: http://www.s203574650.websitehome.co.uk/Screenshots/IE7_form.jpg
IE10: http://www.s203574650.websitehome.co.uk/Screenshots/IE10_form.jpg
HTML code:
<form id="contact" action="contact_us.php" method="post">
<div>
<label for="fullname">Your Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="eg. John Smith" required aria- required="true" >
</div>
<div>
<label for="email">Your Email Address:</label>
<input id="email" name="email" type="email" placeholder="eg. johnsmith#gmail.com" required aria- required="true" title="Please enter a valid email address">
</div>
<div>
<label for="phone">Your Phone Number (optional):</label>
<input id="phone" name="phone" type="tel" placeholder="eg. 07000 123456" pattern="([0-9]|( |-)?) {10,14}" title="Please use only digits, spaces and hyphens.">
</div>
<div>
<label for="experience">Your Badminton Experience:</label>
<select name="experience">
<option value="default">Please Choose</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
<option value="Don't know">Don't know</option>
</select>
</div>
<div>
<label for="club_matches">Have you previously played matches for a club?:</label>
<input type="radio" name="club_matches" value="Yes">Yes
<input type="radio" name="club_matches" value="No" checked>No
</div>
<div>
<label for="info">Additional Info / Questions: </label>
<textarea name="info" type="text">
</textarea>
</div>
<div>
<label for="blank"></label>
<input type="submit" id="submit" value="Submit Form" name="sent">
</div>
</form>
And the CSS:
/* styles for contact form */
#contact
{
background-color: #DDE2E2;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: solid slategrey 2px;
box-shadow: 3px 3px 5px slategrey;
-o-box-shadow: 3px 3px 5px slategrey;
-moz-box-shadow: 3px 3px 5px slategrey;
-webkit-box-shadow: 3px 3px 5px slategrey;
padding: 3%;
font-family: arial;
color: #0099FF;
font-weight:bold;
align:center;
width: 80%;
margin-left:40px;
}
label
{
width: 40%;
float:left;
text-align:right;
margin-right: 2em;
font-size: 0.8em;
}
label, select, textarea, input
{
margin-bottom: 1.5em;
clear:left;
margin-left: 1em;
}
#submit
{
margin-top: 5%;
margin-bottom: 0;
}
The problem is that you're clearing floats for the select boxes, textareas, and inputs as well as for the labels, when you should only be clearing them for the labels.
label, select, textarea, input {
margin-bottom: 1.5em;
clear: left;
margin-left: 1em;
}
Remove clear: left; from the CSS selector for label, select, textarea, input and add it to the one for label:
label {
width: 40%;
float: left;
clear: left;
text-align: right;
margin-right: 2em;
font-size: 0.8em;
}
label, select, textarea, input {
margin-bottom: 1.5em;
margin-left: 1em;
}
When I try to drag the popup, first I have to click on draging position. But when I try to click on the draging enable area, popup window goes to another position. Even I try again it continuously happens.
here is my mark up:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="btnEditAddress"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="btnOKAddress"
CancelControlID="btnCancelAddress" DropShadow="true" PopupDragHandleControlID="headHolder"
X="270" Y="130" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="width: 320px;
display: none;">
<div>
<div id="headHolder" runat="server" class="addressEditHead" style="height: 20px;
padding-top: 5px;">
<span style="padding-left: 5px;" id="addressType" />
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="height: 25px; text-align: center;">
<asp:Button ID="btnOKAddress" runat="server" CssClass="button" Text="Save" OnClientClick="saveAddress();" />
<asp:Button ID="btnCancelAddress" runat="server" CssClass="button" Text="Cancel" />
<asp:HiddenField ID="hdnRelatedTable" runat="server" />
<asp:HiddenField ID="hdnRelatedID" runat="server" />
</div>
</div>
</asp:Panel>
Hi, All I found the solution. I upgrade the ajaxtoolkit to latest version. Now It's working coreclty
I found the solution. I upgraded the ajaxtoolkit to latest version. Now It's working coreclty.
I'm trying to create draggable web parts in ASP.NET 3.5 but the thing just doesn't want to be dragged. I already tried the workarounds for making it compatible with Firefox, by using AJAX, but still doesn't work.
This is code I have on my page:
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<uc2:DisplayModeMenu ID="DisplayModeMenu1" runat="server" />
<div>
<table>
<tr>
<td>
<asp:WebPartZone ID="SidebarZone" runat="server" HeaderText="Sidebar">
<ZoneTemplate>
<asp:Label runat="server" ID="linksPart" title="My Links">
ASP.NET site
<br />
GotDotNet
<br />
Contoso.com
<br />
</asp:Label>
<uc1:SearchUserControl ID="SearchUserControl1" runat="server" title="Search" />
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td>
<asp:WebPartZone ID="MainZone" runat="server" HeaderText="Main">
<ZoneTemplate>
<asp:Label ID="lbl" Text="Some text" Title="Content" runat="server"></asp:Label>
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td>
<asp:EditorZone ID="EditorZone1" runat="server">
<ZoneTemplate>
<asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
<asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
</ZoneTemplate>
</asp:EditorZone>
</td>
</tr>
</table>
</div>
I never get the drag cursor when I hover the titles.
Any idea on what I may be doing wrong?
EDIT:
I am in the page in Edit mode, not Browse mode....
Tks in advance.
As a reference, I solved the problem by adding a css to the div containing the web part controls:
<style type="text/css">
.container
{
padding: 0px;
margin-top: 5px;
margin-left: 20px;
margin-bottom: 0px;
/* position: relative; */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 550px;
width: 990px;
}
</style>
It has to do with the position element.
Hope it helps someone facing the same problem.