I need to remove the defualt pagination provided by ZK in one of zul page and add a vertical scroll bar instead. How to achieve this?
Perhaps you are refering to a listbox or a grid component, in that case you probably have something like this:
<listbox id="listbox" mold="paging" pageSize="10">
or
<grid id="grid" mold="paging" pageSize="10">
In both cases, the mold property is making that your component do a pagination, and the pageSize property stablish how many item will be show in every page...
If the component does not have the mold property, zk will put a scrollbar by default (but it can give you an unexpected visual behavior)
If you want to replace the pagination with a scrollbar you can put a css property into your component, like this:
<listbox id="listbox" style="overflow:auto">
You can see an example here
Related
By default Autocomplete seems to show 8 suggestions at a time, the rest you will have to scroll down to see it. There are no component property related to this number in Antd documentations. Is there any way to change that to another fixed number? How about making it display all?
Internally Autocomplete use the component Select and make all Select properties available, even internal props. listHeight can be used to increase the height of the suggestion dropdrown list. As note in Antd's Select documentation:
Virtual scroll internal set item height as 32px
To make Autocomplete display 10 items for example, set listHeight={320} to Autocomplete. To make it display all items, pass an arbitrary large number to listHeight like 999999 or Number.MAX_SAFE_INTEGER
I have a question here, i need to add some button to the TextView in my tree table header row, the color of Button should be changed according to the line items rows(child nodes) data.
How could that possible? please anyone help me on this.
<TextView id="idKuljkiel" semanticColor="Critical" text="{path:'zstrv_fun>KuljKiel', formatter:'.zchangeColor'}" />
I have created formatter function where i can write some code to create a button, but i am unable to add button to the TextView, and the color of the button should be changed as traffic lights.
For example if childrows have "X" or "" then Yellow,
if childrows have "X" or "X" then Green
if childrows have "" or "" then Red
Can anyone help me on this?
You cannot add a Button or any other control to a TextView. It does not support child controls.
In a formatter you should not modify the view. Its meant to just format a value. It should be idempotent.
The Button control does not support arbitrary colors. It has a style property that lets you change the button to red (reject), green (accept) or gray (default). colors depend on the theme.
Yout can put the TextView together with a Button into a HorizontalLayout. You can then bind the visible property of the Button to your model (and use a formatter if needed).
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" xmlns:l="sap.ui.layout">
...
<l:HorizontalLayout>
<TextView id="idKuljkiel" semanticColor="Critical" text="{path:'zstrv_fun>KuljKiel', formatter:'.zchangeColor'}" />
<Button visible="{path:'zstrv_fun>WhatEver', formatter:'.zbuttonVisible'}" style="{path:'zstrv_fun>Bla', formatter:'.zbuttonStyle'}"/>
</l:HorizontalLayout>
...
</mvc:View>
Dependig on your data structure inside your model it might be possible to bind to the whole row object and use that in the formatter. Otherwise it could be necessary to process the model data after load to calculate additional properties on the header rows.
i Know editing List view item template and changing
<StackPanel orientation="horizontal"></StackPanel>
Inside the items list will create a horizontal listview. But is there any other simpler way without using listview in winRt to create a Horizontal list.
I personally want to avoid data binding thats why. Please let me know.
Use a scrollviewer and a horizontal stackpanel.
<ScrollViewer VerticalScrollMode="Disabled" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">
<StackPanel x:Name="spContent" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></StackPanel>
</ScrollViewer>
use the Xaml.cs file to load data from code behind. Else you can use binding if you want to.
I've got a problem with the css nth-child selector.
I have a grid of 3x3 elemtens inside a container. Those elements have a class called .square.
With .square:nth-child(3n+1) I select every first element of the row and color it green.
With .square:nth-child(3n+3) I select every last element of the row and color it red.
This works fine, until there is any element(<br> for example) that is outputted before the grid. With every new <br>, the order moves up by one, as is the <br> was considered a .square.
As I understand the .nth-child, it should select every third element of the .square class. Why does it apply that to any element, and how can I achieve my inital goal?
Thanks in advance
http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728
The problem occurs on the boxes in the middle.
Sounds like you want nth-of-type.
Related selectors which you may find useful are :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type.
nth-child working only with html element, nth-child css don't know class and id, if you want set nth-child for class, add some custom attribute for that class using jquery..
like
jQuery('.square:nth-child(3n+3)').attr("act","dummy");
then use css
div[act='dummy']{
border : 1px solid red;}
In GWT, I am using CellTable.
When you mouse over the CellTable it highlights each row.
How do change the behavior of the highlighting from the mouse over? Specifically:
change the color of highlighting
disable/enable
make it highlight only the specific grid item at your cursor (instead of the entire row)
( The current hack I have is to create a bunch of 1 column wide CellTables and add them to a VerticalPanel layout... creating the illusion that there is one CellTable and it highlights each grid according to your cursor. Is this bad? Why? performance? )
You will notice the CellTable uses a ResourceBundle, which means all the css styles get obfuscated ... this makes it more difficult to override styles.
The CellTable constructor will actually allow you to override the default ResourceBundle. So first, you need to create your own resource bundle like this:
public interface CellTableResources extends Resources {
public CellTableResources INSTANCE =
GWT.create(CellTableResources.class);
/**
* The styles used in this widget.
*/
#Source("CellTable.css")
CellTable.Style cellTableStyle();
}
Then you need to create your own CSS file. I recommend copying the CellTable style directly into your project and use that as a starting point. You can find it here:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTable.css
Make sure the style is injected first, and then you just feed it into the CellTable's constructor like this:
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
Specifically, you'll want to tweak these styles:
cellTableKeyboardSelectedRow
cellTableKeyboardSelectedRowCell
cellTableSelectedRow
cellTableSelectedRowCell
cellTableKeyboardSelectedCell
It is important to note that the cell table differentiates between the 'selected row' and the 'keyboard selected row'. The selected row is the actual row selected (ie via SelectionModel). The keyboard selected row refers to what is highlighted when the user is pressing the up / down key, but does not mean the row is actually selected (if that makes sense).
I'll just add for number 2) on your list, you can simply do
cellList.setSkipRowHoverStyleUpdate(true)
That completely disables highlighting. There are also two more setSkip-functions on CellList related to hovering.
CellTable can be styled via CSS: How do I style a gwt 2.1 CellTables headers?
To disable highlighting just set the hover CSS property to nothing.
Possibly - try tweaking the .cellTableSelectedRow and .cellTableSelectedRowCell.
Here is the original CellTable.css: http://www.google.com/codesearch/p?hl=en#A1edwVHBClQ/user/src/com/google/gwt/user/cellview/client/CellTable.css&q=cellTableLastColumn&d=8