i often used rich-faces for makes a user interface, recently i passed at vaadin.
Now i'm looking for a vertical menù in vaadin, is there this kind of compontent?
Rich-faces has the followed:
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=panelMenu&skin=blueSky
If you're using vaadin 6.2+, you can use this add-on :
https://vaadin.com/directory#addon/melodion
But I suppose you are using vaadin 7, so you could probably achieve the same result either by
updating this add-on (should be easy)
using the accordion component: https://vaadin.com/book/vaadin7/-/page/layout.accordion.html
Unfortunately vaadin provides only a menubar.
If you have experience in html and css, you can create your own vertical menu and then use vaadin CustomLayout to embed it in a panel.
For example you can try something like this.
You should create an html file:
<table width="100%" height="100%">
<tr height="100%">
<td>
<table align="center">
<tr>
<td align="left">Menu 1</td>
<td><div location="menu1"></div></td>
</tr>
<tr>
<td align="right">Menu2</td>
<td><div location="menu2"></div></td>
</tr>
</table>
</td>
</tr>
</table>
Then you should embed it in vaadin in this way:
// Have a Panel where to put the custom layout.
Panel panel = new Panel("Menu");
panel.setSizeUndefined();
main.addComponent(panel);
// Create custom layout from "yourfile.html" template.
CustomLayout custom = new CustomLayout("layoutname");
//the style name refers the one you should define in css
custom.addStyleName("customlayoutexample");
// Use it as the layout of the Panel.
panel.setContent(custom);
// Create a few components and bind them to the location tags
// in the custom layout.
TextField menu1 = new TextField();
custom.addComponent(menu1, "menu1");
TextField menu2 = new TextField();
custom.addComponent(menu2, "menu2");
Pay attention at binding location name with component name.
If you want to add some javascript to xml (for open/close menu elements) you should write it directly in tag attribute.
Related
I applied fadein effect of Angular-Animations to my Angular project based on ASP.NET, and display only the first row faded-in. However, the other rows are not displayed when using *ngIf as shown below:
<ng-template pTemplate="body" let-row let-i="rowIndex">
<tr *ngIf="i==0" [#fadeInOnEnter]>
<td>
<a [routerLink]="['/detail/']">{{ row.Summary }}</a>
</td>
</tr>
</ng-template>
I know that else can be used in this situation, but I do not want to repeat lots of <td> blocks omitted in this example. So, is there a way to display animation only if the condition is true in *ngIf field and display the same block without animation.
Can you just apply the condition to the animation?
[#fadeInOnEnter]="i == 1"
I have a web page that does not appear as it does in design view. It adds padding around table cells with text boxes in, but nowhere else. I want it without the padding.
This is the html:
<asp:Panel ID="PlayerPanel" runat="server" BackColor="#3333CC">
<table id="PlayerTable" style="width:100%;" border="0">
<tr>
<td >Name</td>
<td><asp:textbox id="txtPlayerName" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
<tr>
<td >Mobile</td>
<td><asp:textbox id="txtPlayerMobile" runat="server" Width="400px" AutoPostBack="True" ></asp:textbox></td>
</tr>
<tr>
<td >Email</td>
<td><asp:textbox id="txtPlayerEmail" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
</table>
</asp:Panel>
In design, it appears without padding. When running, it appears with padding above and below the textbox of about the same height as the textbox.
I have tried setting "padding:0px;" for the panel, the table and the cell, but it still stays the same. What else can I try?
Maybe it's cellpadding directly on the table? look here; try setting that to 0
Maybe it's the browser itself putting some default styling on it - in Chrome, open up inspector (F12 or right click -> inspect element) and there you can see what's being applied to the element.
I found this fix:
p {
margin: 0;
padding: 0;
}
I added this into the css and it fixed the problem. It is one of those 'Well, duh!' solutions.
I have a grid in my module. In this grid the first column "Vessel Name". In the vessel name is present in a alphabetical order. If I click any one of the vessel, one popup will open. After closing popup the grid is not refreshed properly. And the last data is present in first. I need to scroll.
So what I need is, After closing popup I need focus on the clicked vessel. How can I do this. I have more than 30 data in a grid. Based on rowIndx how can I achieve? Please help me.
Considering your table strucutre
<table class="grid-class">
<tr>
<td>ele 1</td>
..
<td>ele X</td>
</tr>
<tr class="active"> // the one you clicked,set active to this and remove to all other
<td>ele 1</td>
..
<td>ele X</td>
</tr>
</table>
Firstly set a css(write your css based on your need) class active which highlight the row.Then try something like-
$(document).ready(function(){
$('.grid-class tr').click(function() {
$(this).sibling('tr').removeClass('active');
$(this).addClass('active');
});
});
i have such a checkbox and i whant to turn it into jquery ui checkbox to look the same on all browsers.
<tr>
<td valign="middle" class="ck"><input name="perk-senior" id="senior" type="checkbox" value="4" checked /></td>
<td valign="middle"><div class="text">Show available plans for senior</div></td>
</tr>
but after i use
$('#senior').button()
the checkbox just disappears. I tried adding jqueryui icons, and removing css, it gives the same effect.
how can i make it into a standard checkbox with a tick icon on toogle?
Should that not be:
$('.ck').button()
Or:
$('#senior').button()
You've selected the entire containing div and not the checkbox itself (presuming that the table is nested within a div named #search).
Inside a panel I have an asp calendar and an asp detailsView. Im trying to get them to display along side each other but cant get the alignment correct. I would like the the calendar top left, and the detailsView top right, with the top of the grid matching the calendar.
<asp:Panel ID="detailsPanel" runat="server">
<asp:Calendar ID="calendars" VerticalAlign="top" HorizontalAlign="left" runat="server" OnSelectionChanged="LoadRequestedDate_OnClick" OnDayRender="cal_DayRender"></asp:Calendar>
<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource" HorizontalAlign="right" VerticalAlign="top" >
After table example now looks like:
Just need to align the tops
iv tried <td align="left"> ad right but no gd
There are several options how to do this. I'll give you two.. one simple and one correct :)
a.) Simple: Use HTML table like:
<table>
<tr>
<td>PUT_CALENDAR_HERE</td>
<td>PUT_DETAILS_HERE</td>
</tr>
</table>
b.) Correct: Use CSS to modify positioning:
float:left; // apply this to calendar
Caution: You might need additional styles to tweak position. If you provide pure HTML, I could try to make a prototype in jsFiddle (otherwise I would only create it with some placeholders).
btw: You either didn't paste complete HTML, or you are missing closing tag for panel.
Edit: Here's an jsFiddle to solve your table positioning problem: http://jsfiddle.net/KdhnV/