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/
Related
With Reveal.js, I would like to use flexbox and/or grids to layout slides. Unfortunately, it seems Reveal.js always overrides the display property of section tags with block as part of its slide show/hide logic. Viz:
<section class="mylayout">
<div>...</div>
<div>...</div>
</section>
section.mylayout {
display: flex;
}
Has no effect, because Reveal.js adds a style="display: block" attribute to the section tag.
Is there any way around this? It works to put a nested div inside the section and have that be grid/flex, but it just feels clunky and gross to have an extra layer in there that adds no other value than a workaround.
Has anyone else found a different way to address it?
You can set it to use flexbox in the initialization settings now. See this update on the documentation.
Im using angularjs grid: this component allaways displays only data which fits to page. Suppose I want to have all data displayed at once, even if it takes a few pages (page scrolling is needed to see all data, but without grid scroll).
How to do it?
I played with:
parameter ui.grid.autoResize
trying to overwrite default css
setting.
No result.
Did you tried adding a class to your div. I can see the grid scroll bars if I add a CSS like so. You need to change the below CSS according to your needs.
.grid {
width: 580px;
height: 500px;
}
And here is my ui-grid
<div>
<div class="grid" ui-grid="assetGridData" ui-grid-move-columns ui-grid-resize-columns ui-grid-selection></div>
</div>
Also it will be good if you can have a fiddle for this issue.
One hacky way to make it is to set
gridOptions.minRowsToShow = rows.length + 0.1
0.1 is needed to completely remove the vertical scrollbar of the grid. If 0.1 doesn't work for you, try a higher value like 0.2.
ui-grid-auto-resize worked in my case
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'd like to place an icon inside a list-divider, but it seems that jQuery Mobile lets me apply data-icons to normal list items only and not to list items with data-role='list-divider' assigned.
Simply enough, I want the list-divider to display an info button for providing the user with more information about this category, which should look like so:
The point is, I'd like to place the info icon (with data-icon='info' or class='ui-icon-info') within the list-divider, while maintaining consistency in the overall style, i.e.:
The category is headed by a list-divider, and not by a list-item that is just styled to look like the list divider.
The icon is displayed on the right side, like the arrows in the list items below. The icon has to have the same style of appearance like the arrows, which means that it should not look like a button or have an extra frame around it.
The list-divider, or at least the icon, should be clickable, so the user is able to get the information about this category.
I'd preferably like to achieve this without any CSS customizations or JavaScript fiddling, using data-attributes only.
This is what I got (using jQuery Mobile 1.3.2):
List-item with data-icon:
<li data-theme='a' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Correct appearance of info-icon
Wrong appearance of category, because a normal list-item is used instead of a list-divider
Using a list-item with data-role='list-divider' assigned:
<li data-role='list-divider' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
No icon at all
Wrong title appearance and only text is hyperlinked instead of the whole list-item
List-divider with info-button inside:
<li data-role='list-divider'>Category: A<a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Info button has wrong appearance
The button has a border which I like to remove for consistency, so the icon is shown in its usual disc appearance. Removing data-role='button' doesn't help, because the button wouldn't be rendered at all and would therefore not show the icon.
The icon's position is not on the right side. I know it would be possible using data-iconpos='right', but I used this attribute for the icon-only (notext) layout already.
Category appearance is not pleasing, as the button increased its height. Even data-mini='true' didn't help.
I know there are a dozen of easy ways doing it the normal, less jQuery Mobile fixated way, but after 3 approaches, I'm eager to find out how this could be done with jQM.
This works, including the click, i just test it
<li data-role="list-divider">Test<div onclick='alert("Some info...");' class="ui-icon ui-icon-info" style="color:white;float:right"><div></li>
if the icon doesnt align with the rest of the icons add the below to the style
margin-right: -5px;
and change the pixels size to match the other icons
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.