I have a two column layout, left is a pie chart, right is a form where you can change values and if satisfied save the configuration. Instead of my current code, which only let the pie chart present the saved state, I want it to be updated as soon as the form is changed. How can I do so?
<Row>
<Col md={12} lg={12}>
<ChartPie portfolio={portfolio} />
</Col>
<Col md={12} lg={12}>
<Form form={form} initialValues={portfolio} onFinish={onFinish}>
<Form.List name="stocks">
{(entries, { add, remove, move }) => (
<AllocationTable
form={form}
data={entries}
add={add}
remove={remove}
move={move}
/>
)}
</Form.List>
<br />
<Row justify="end">
<Form.Item>
<Button type="default" onClick={onReset}>
Reset
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginLeft: 8 }}>
Submit
</Button>
</Form.Item>
</Row>
</Form>
</Col>
</Row>
Related
I am using the Select with the multiple prop. The component works fine, and the InputLabel renders the renders the following:
However, when I add an icon at the beginning via the startAdornment prop, the InputLabel is moved above the input field.
Do you know how to show the label next do the icon when no values are selected?
The code is:
<FormControl className={classes.formControl} fullWidth variant="outlined" size="medium">
<InputLabel name={name} color="secondary" variant="outlined" htmlFor={id} id={id} className={classes.label}>{label}</InputLabel>
<Select
name={name}
labelId={id}
id={id}
multiple
autoWidth
startAdornment={icon}
color="secondary"
value={selectedValues}
onChange={handleChange}
renderValue={selectedOptions => (
<div className={classes.tags}>
{selectedOptions.map(option => (
<Chip key={option.value} label={option.label} size="small" className={classes.chipStyle} />
))}
</div>
)}
>
{options.map(option => (
<MenuItem key={option.value} value={option}>
<Checkbox checked={logicHere} color="primary" />
<ListItemText primary={option.label} />
</MenuItem>
))}
</Select>
</FormControl>
Did you try ?
<Select
InputProps={{
startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
}} />
ngFor don't seem to work for me with ngfor when the flex direction is "row", I mean it works but it puts the items on top of each other instead of side by side
<FlexboxLayout class="itemWindow" *ngFor="let imageUrl of matchItems"
flexDirection="row">
<StackLayout class="inventoryImage">
<Image width= "80" height="80" stretch="aspectFill"
left="5" src="{{imageUrl}}" ></Image>
</StackLayout>
</FlexboxLayout >
What am I doing wrong ? is there another way to do it? I tried with DockLayout but same thing is happening.
I don't have your components so I used divs, but the idea is pretty much the same.
<div fxLayout="row"> <!-- extra container with row layout -->
<div class="itemWindow" *ngFor="let imageUrl of matchItems">
<div class="inventoryImage">
<div width= "80" height="80" stretch="aspectFill"
left="5">{{imageUrl}}</div>
</div>
</div>
</div>
I just added div tag before listItem and added *ngFor to it instead of FlexboxLayout. And it works
<FlexboxLayout flexDirection="row">
<div *ngFor="let filterItem of activityFilters">
<Label flexGrow="1" class="text-center" [text]="activityFilter[filterItem]"> </Label>
</div>
</FlexboxLayout>
I am trying to increase the height of slider/track of slider component.
I have been trying to set style and sliderStyle, but no luck yet.
I was looking at the code and it seems does not allow us to set css style down to that level.
return (
<div {...other} style={prepareStyles(Object.assign({}, style))}>
<span>{description}</span>
<span>{error}</span>
<div
style={prepareStyles(Object.assign({}, styles.slider, sliderStyle))}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onMouseDown={this.handleMouseDown}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onMouseUp={this.handleMouseUp}
onTouchStart={this.handleTouchStart}
onKeyDown={!disabled && this.handleKeyDown}
>
<div ref={(node) => this.track = node} style={prepareStyles(styles.track)}>
<div style={prepareStyles(styles.filled)} />
<div style={prepareStyles(styles.remaining)} />
<div
ref={(node) => this.handle = node}
style={prepareStyles(handleStyles)}
tabIndex={0}
>
{!disabled && !disableFocusRipple && (
<FocusRipple
style={rippleStyle}
innerStyle={styles.rippleInner}
show={(hovered || focused) && !active}
color={styles.rippleColor.fill}
/>
)}
</div>
</div>
</div>
<input
type="hidden"
name={name}
value={value}
required={required}
min={min}
max={max}
step={step}
/>
</div>
);
Any thought on that?
Thanks,
I am trying to get the value of a textbox on a zul page by using some kind of getValue method. I should handle this on the zul page, not on a controller. I need to assign a listbox cell (which is the first cell of the list box below) with a value coming from the textbox.
<listcell>
<label value="" />
</listcell>
<listcell>
<toolbarbutton visible="true"
image="/resources/images/icons/1616/page_text.gif" />
</listcell>
<listcell>
<label value="#{file.name}" />
</listcell>
<listcell>
<toolbarbutton forward="onClick=onRemoveMultipleFiles"
visible="true" id="newFileAndCommentRemove" image="/resources/images/icons/1616/delete.png" />
</listcell>
</listitem>
If what you want is that after the textbox is filled then the first cell will fill with its value you can do it like this:
put an id into the label in the cell
put an onChange operation in the textbox so when the textbox change you can put its value into the cell
like this:
<textbox id="textbox" onChange="label.setValue(self.getValue())"/>
<listbox id="newFileAndComment">
<listhead>
<listheader label="1" width="30px" />
</listhead>
<listitem self="#{each=file}">
<listcell>
<label id="label"/>
</listcell>
</listitem>
I have a page built with ZK. In this page there is a button that start a search. If there are some data them appear in a grid view.
Every data are built in this way:
v Date1 (dd/mm/yyyy)
- item
- item
- item
v Date2 (dd/mm/yyyy)
- item
- item
Lecter V means an arrow but I can't post an image so I use a "v" that have similar image to undestand.
It works correctely but there is a problem.
I would have this situation:
Date1 (dd/mm/yyyy)
Date2 (dd/mm/yyyy)
When I click on a date I want that the arrow became "v" and all data appear.
If in the first case I click on date it became close.
How to change the default view of grid items?
This is my code
<grid id="demoGrid" width="50%" height="400px" style ="float:left"
model="#bind(vm.value)" emptyMessage="No data">
<columns menupopup="auto">
<column sort="auto(Hour)" label="Hour" width="150px"/>
<column sort="auto(Value)" label="Value(bpm)" hflex="1" />
</columns>
<!-- template for group -->
<template name="model:group">
<group label="#load(each)" />
</template>
<!-- template for each element in model -->
<template name="model" >
<row>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</row>
</template>
<!-- template for footer -->
<template name="model:groupfoot">
<groupfoot>
<cell colspan="5" style="text-align: right; padding-right: 15px">
<label value="#load(each)" style="font-weight:bold;" />
</cell>
</groupfoot>
</template>
</grid>
I try to use tag details in this subcode:
<template name="model">
<details open="false">
<row>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</row>
</details>
</template>
Try the details like this :
<template name="model">
<row>
<detail open="false">
<hlayout>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</hlayout>
</detail>
<label value="second column"/>
</row>
</template>
Explication :
Detail can have only 1 root element so that's why we set the the hlayout.
Of course you can change this to div or whatever you want.
The row tag has to be outside the detail tag.
The detail take a column so for this example you need to provide 2 columns.
Edit :
I created a fiddle.