I am using Grommet to build a dashboard with <Grid>.
If using three columns, responsive behaviour is as expected when the window is made smaller:
But if using four columns there is no breakpoint at which the cards stack on top of each other:
The code is out-of-the box and so the expectation is for the built-in responsive behaviour to kick-in:
<Grommet full theme={grommet}>
<Page>
<PageContent border={{"side":"bottom"}}>
<Header align="center" direction="row" flex={false} justify="between" gap="medium">
<Anchor label="Title" icon={<Home />} />
<Menu icon={<User />} items={[{"label":"sign out"}]} />
</Header>
</PageContent>
<PageContent>
<PageHeader title="Dashboard" margin={{"vertical":"medium"}} />
<Grid columns="1/4" gap="medium">
<Meditation />
<Habits />
<Chart />
<Card><Text>Everything is ok!</Text></Card>
</Grid>
</PageContent>
</Page>
</Grommet>
(Each imported item is just a <Card pad="small">)
Related
Not sure if this is some CSS issue that I can fix, but I am trying to use a <Stack /> from Material UI to construct a vertical list of checkboxs with labels.
I've attempted the following in the sandbox here (see demo.tsx): https://codesandbox.io/embed/basicstack-material-demo-forked-q8kb4q?fontsize=14&hidenavigation=1&theme=dark
With the code here
export default function BasicStack() {
return (
<Box sx={{ width: "100%" }}>
<Stack spacing={2}>
<FormControlLabel control={<Checkbox />} label="Test1" />
<FormControlLabel control={<Checkbox />} label="Test2" />
<FormControlLabel control={<Checkbox />} label="Test3" />
</Stack>
</Box>
);
}
As you can see in the demo, ONLY the first child component isn't lined up correctly so a temporary solution is to add a sx={{marginLeft: 0.1}} only to the first <FormControlLabel /> which I think isn't a great practice. Does anyone know why this misalignment happens? And if there is a more elegant way of fixing it?
I think the problem is on the spacing=2, you can try to remove it, and then the indented will correct.
<Stack>
<FormControlLabel control={<Checkbox />} label="Test1" />
<FormControlLabel control={<Checkbox />} label="Test2" />
<FormControlLabel control={<Checkbox />} label="Test3" />
</Stack>
I am using Divider component from Semantic-ui for dividing a segment vertically, it divides the segment 50/50 i think is there way to make it 70/30 60/40 basically whichever i like ? Thanks for help!
This can be done in a Segment component by adding a grid and change width props from Grid.column like this:
<Segment>
<Grid stackable>
<Grid.Column width={4}>
<Image src="https://react.semantic-ui.com/images/wireframe/image.png" />
</Grid.Column>
<Grid.Column>
<Divider vertical> or </Divider>
</Grid.Column>
<Grid.Column width={9}>
<Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
</Grid.Column>
</Grid>
</Segment>
<ScrollView id="scrollGeneric" height ='auto' visible='false'>
<View id="formView" height='auto'>
<View id='distSlider' top='0' height='100'>
<Label id="lblGeneric" >
Search Distance:
</Label>
<Slider id="sliderDistance" top="50" min="2" max="80" width="50%"/>
<Label id="sliderDistanceText" width='auto' top="50" right="40" />
<Label id="sliderDistanceTextMeasure" width='auto' top="50" right="10" text="km" />
</View>
</View>
</ScrollView>
I have set the height auto for scrollView and formView. However whenever I add more views inside of the formView the size of the window does not expand vertically with it. It will eventually crop out the views that exceed the window height.
The only way to solve this is to manually specify the height of each view within the form view div.
Is there anyway I can avoid doing this, thanks
Have you tried using Ti.UI.SIZE instead for the height? As per the documentation, "height:auto is not recommended for new development and will be deprecated in the future."
I want to create a window that I can style its shape (for example close button). Based on my reading I can not style these sections of a windows as they are not client sections and they are handeled by OS.
To create my own winmdows style, I created a border less windows( style=none) and I am trying to place the buttons on window by myself.
In my design the top of window should have an image on left hand side and close/minimize/maximise buttons on right.
I have this xaml which would shows logo on left and a button on right.
<DockPanel>
<DockPanel DockPanel.Dock="Top" Height="50" Background="DarkGray" Width="Auto" cal:Message.Attach="[Event MouseLeftButtonDown] = [Action MoveWindow]">
<Image DockPanel.Dock="left" Height="47" Source="/Resources/Images/Toplogo.png"/>
<Button DockPanel.Dock="Right" Width="16" Height="14" x:Name="CloseWindow" />
</DockPanel>
But when I run the application, I can see that the logo is on left, but close button is not on the right, but it is in the middle and if I change the window size, logo and button move to the middle of window ( the dockpanel is not resize.)
How can I create such behaviour in xaml?
The DockPanel defaults to `LastChildFill="True"' so the final element within the DockPanel (your button) fills the remaining space.
You can fix it by adding HorizontalAlignment="Right" to the button, or LastChildFill="False" to the inner DockPanel.
I would use a Grid and create two rows. One for the "window bar" and the other for the "content".
Example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</<Grid.ColumnDefinitions>
<!-- Header w/ button -->
<Grid Grid.Row="0" Background="DarkGray" Height="50" Grid.Column="0" HorizontalAlignment="Stretch">
<Image Height="47" Source="/Resources/Images/Toplogo.png" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Button Width="16" Height="14" x:Name="CloseWindow" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
<!-- Body of Window -->
<Grid Grid.Row="1" Grid.Column="0">
</Grid>
</Grid>
I have a page with two different View Models:
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
And the include is:
<window>
<label id="sid" value="#load(pid)" />
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
The problem is that once I define the second viewModel, all the external references are inaccessible: I have a value for the first label, but I have no values for the listbox or the second label. Is there a way to do that? I tried with no success to do this:
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')" list="#ref(p.someList)">
<listbox model="#id('vars') #load(list)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
I could merge the second View Model in the first one, but that wouldn't be very convenient! I am also open to other solutions which allow me to have a modular approach.
My version of ZK is 6.0.1
The reason you are unable to access the external components is your composer i.e BindComposer you have same composer for the Main zul as well as for the Included zul. You need to access the Included Listbox from external ZUL.
So remove the Composer of Include ZUL, give an ID to window you have two Space Owners access the inner Listbox
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include id="include" src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
<window id="win">
<label id="sid" value="#load(pid)" />
<div
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox id="listbox2" model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
Now while accessing in your BindComposer declare variable as public :
Listbox include$win$listbox2;
in your doAfterCompose() add this line
Sysout("You can access your inner Listbox and it is:"+include$win$listbox2);
Now you see you will not get your Listbox NULL!!
Link : http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space
It is (was) actually a bug in ZK, which has been fixed for a future version.