How to set width and height to 100% with <AutoSizer>? - css

I following the example: demo, source code.
they set width={width} and height={height}, if I do that I get nothing displayed... To display somehthing I need to set the height to something, for exaple 600px, but I want to have this to 100% the height of the window.
How do I do that?
css
.AutoSizerWrapper {
flex: 1 1 auto;
}
Here is my code.
<div className="AutoSizerWrapper">
<AutoSizer>
{({ width, height }) => (
<Table
width={width}
height={600}
headerHeight={50}
rowHeight={50}
rowCount={this.props.list.length}
rowGetter={({ index }) => this.props.list[index]}
>
<Column label="#" dataKey="_id" width={100} flexGrow={1} />
<Column
label="Part Number"
dataKey="itemNumber"
disableSort
width={100}
flexGrow={1}
/>
<Column
width={100}
label="Part Name"
dataKey="partName"
disableSort
flexGrow={1}
/>
<Column
width={100}
label="Part Description"
dataKey="partDescription"
disableSort
flexGrow={1}
/>
<Column
width={100}
label="customs Tariff Number"
dataKey="customsTariff"
disableSort
flexGrow={1}
/>
<Column
width={100}
label="Net Weight (kg)"
dataKey="netWeight"
disableSort
flexGrow={1}
/>
</Table>
)}
</AutoSizer>
</div>

Related

How to create a variant outlined for a FormGroup

How can I create a variant outlined for a FormGroup of a checkbox components.
<FormGroup >
<FormControlLabel label="a" control={<Checkbox />} />
<FormControlLabel label="b" control={<Checkbox inputProps={{ 'aria-label': 'primary checkbox' }} />} />
</FormGroup>
So when the user select a check box the color of the outline will change.
Something like:
<FormControl variant="outlined">
<InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
label="Age"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
</Select>
</FormControl>
Thank you

How to create 2 x 2 grid using NativeScript GridLayout

The Problem
I am trying to simply display images in 2 rows, 2 columns - equally centered all around.
I have tried all sorts of Layouts. Here are a couple of my failures:
My Ideal Layout
My XML
<Page loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar class="action-bar customActionBar" >
<!--
Use the NavigationButton as a side-drawer button in Android
because ActionItems are shown on the right side of the ActionBar
-->
<NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
<!--
Use the ActionItem for IOS with position set to left. Using the
NavigationButton as a side-drawer button in iOS is not possible,
because its function is to always navigate back in the application.
-->
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
tap="onDrawerButtonTap"
ios.position="left"></ActionItem>
<Label class="action-bar-title" text="Signup"></Label>
</ActionBar>
<DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
stretchLastChild="false">
<Button class="submitButton h2 border" text="Next" height="60" dock="bottom"
tap="onSignupButtonTap" returnKeyType="next"/>
<!-- content -->
<StackLayout dock="top" width="100%" height="75" >
<!-- ><Label horizontalAlignment="center" text="Graphic - Step 1 thru 3 Here" />
-->
<Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
<Image style="margin-top: 15" src="~/images/signup/progress.png" stretch="fill" />
</StackLayout>
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
<Label text="Label 1" width="70" height="70" backgroundColor="red"/>
<Label text="Label 2" width="70" height="70" backgroundColor="green"/>
<Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
</WrapLayout>
<!-- end content -->
</DockLayout>
</Page>
Can you help me with this layout? It appears to be easy, but not for me.
Thank You.
Created a playground here.
GridLayout is the king.
<GridLayout columns="*, *" rows="*, *" width="230" height="230"
backgroundColor="lightgray">
<Label text="Label 1" row="0" col="0" backgroundColor="red" />
<Label text="Label 2" row="0" col="1" backgroundColor="green" />
<Label text="Label 3" row="1" col="0" backgroundColor="blue" />
<Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
<Label text="Label 5" row="1" col="2" backgroundColor="orange" />
</GridLayout>

Alternate Color for Highlighting Table Rows

I am trying to add the highlighting row functionality to a table, the values of which I am getting from backend OData service.
I am referring this:
For the views, I am using an xmlview
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
controllerName="generated.app.controller.14768629992738663_S0"
xmlns:m="sap.m"
xmlns:html="http://www.w3.org/1999/xhtml"
>
<m:Page id="sap_Responsive_Page_0"
showHeader="true"
title="Manage Tenants"
showFooter="true"
showNavButton="true"
>
<m:SearchField id="sap_Responsive_Page_0-content-sap_m_SearchField-1476864205399"
placeholder="Search"
showSearchButton="true"
visible="true"
width="268.140625px"
liveChange="onFilter"
/>
<m:Toolbar id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475"
width="auto"
design="Transparent"
height="46px"
visible="true"
enabled="true"
>
<m:Text id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Text-1"
text="Items"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:ToolbarSpacer id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_ToolbarSpacer-2" width=""/>
<m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-1476863865529"
iconDensityAware="false"
text=""
type="Default"
icon="sap-icon://add"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
press="_onButtonPress2"
/>
<m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-4"
iconDensityAware="false"
text=""
type="Transparent"
icon="sap-icon://drop-down-list"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
press="onGroup"
/>
</m:Toolbar>
<m:Table id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613"
width="100%"
noDataText="No data"
selectionMode="MultiToggle"
growing="false"
growingThreshold="20"
growingScrollToLoad="false"
items="{/BYD}"
itemPress="_onTableItemPress"
ariaLabelledBy="title"
>
<m:columns>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Inline"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1-header-sap_m_Text-1"
text="Tenant"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Block"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2-header-sap_m_Text-1"
text="Division"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Block"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3-header-sap_m_Text-1"
text="Type"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Inline"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840-header-sap_m_Text-1"
text="Status"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
</m:columns>
<m:ColumnListItem id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1"
type="Navigation"
press="onPress"
>
<m:ObjectIdentifier id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_ObjectIdentifier-1"
title="{TENANTNAME}"
text="{ID}"
titleActive="false"
visible="true"
/>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_Text-2"
text="{DIVISION}"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863445271-content-sap_m_Text-1476863453798"
text="{TYPES}"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:ObjectStatus id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863521843-content-sap_m_ObjectStatus-1476863547560"
title=""
text="{STATUS}"
state="{STATUSFLAG}"
/>
</m:ColumnListItem>
</m:Table>
<m:footer>
<m:Bar id="sap_Responsive_Page_0-footer-sap_m_Bar-1" design="Auto"/>
</m:footer>
</m:Page>
</mvc:View>
As mentioned in the above link, I created a CSS file, where in I am mentioning the ID of the table to add the highlighting functionality to it.
#sap_Responsive_Page_0-content-build_simple_Table-1476863214613 tbody tr:nth-child(even) {
background: rgb(24, 245, 25);
}
I have added the CSS in resources in manifest.json
"sap.ui5": {
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
But this has not worked as it is expected to work.
Is there something more or different I need to do here?!
You should NOT rely on ids for your css in SAPUI5 : ids are generated at runtime and you have no garanty that it will stay consistent over time (+ the ID you specify in the XML is NOT the actual ID of the DOM element).
Change your CSS selector to use the built-in CSS classes (which SAPUI5 supports over time) or add your own classes.
.xml
<Table class="myHighlightClass" ....
.css
.myHighlightClass { ...

Same distance of text elements using css/jsf-2

You can see, that the distance bewteen email and the email is equal to the distance of member since and the date.
My code for this (using jsf-2):
<h:outputText value="email" />
<p:spacer width="50" height="10" />
<h:outputText value="sasdrftg#rfghre.de" />
<br></br>
<h:outputText value="member since" />
<p:spacer width="50" height="10" />
<h:outputText value="#{userUtilityBean.user.registered.time}">
<f:convertDateTime type="both" dateStyle="short" />
</h:outputText>
My css is simple:
.form-userdata {
position: absolute;
left: 30% !important;
color: blue !important;
}
How can I align the email to the "x-position" of the date?
For such kind of information presentation, use a h:panelGrid instead
<h:panelGrid columns="2">
<h:outputText value="email" />
<h:outputText value="sasdrftg#rfghre.de" />
<h:outputText value="member since" />
<h:outputText value="#{userUtilityBean.user.registered.time}">
<f:convertDateTime type="both" dateStyle="short" />
</h:outputText>
</h:panelGrid>

ZK Grid Columns change width when button pressed

I placed ZK grid with certain proportions of columns as follows:
<grid model="#load(vm.rowList)">
<template name="model">
<row>
<cell width="7px">
<label value="#load(each.number)"/>
</cell>
<cell width="55px">
<vbox>
<button label="Up" width="100%"
onClick="#command('up',row=each)" />
<button label="Down" width="100%"
onClick="#command('down',row=each)" />
</vbox>
</cell>
<cell width="100%">
<label value="#load(each.text)"/>
</cell>
</row>
</template>
</grid>
It is displayed fine until i press any button the the width of each column becomes 1/3 of the grid.
I don't understand the reason. Suggest please how to keep the width constant.
You can try!!! Use de colums by to size every cell.
<grid model="#load(vm.rowList)">
<columns sizable="true">
<column width="20%"/>
<column width="20%"/>
<column width="20%"/>
</columns>
<template name="model">
<row>
<cell>
<label value="#load(each.number)"/>
</cell>
<cell>
<vbox>
<button label="Up" width="100%"
onClick="#command('up',row=each)" />
<button label="Down" width="100%"
onClick="#command('down',row=each)" />
</vbox>
</cell>
<cell>
<label value="#load(each.text)"/>
</cell>
</row>
</template>
</grid>

Resources