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
Related
I am using Xamarin forms version (5.0.0.2515) and Xamarin community toolkit (2.0.4). I have tried to set TabViewItem content a normal label as well as a sample content view but none of them is rendering. Am I missing something or may be doing something wrong or anybody else recently faced similar issue with Xamarin community toolkit TabView.
Emulator Screenshot
Sample code :
<ContentPage.Content>
<ScrollView>
<Grid RowDefinitions="220,Auto,auto,Auto,Auto,150" RowSpacing="5">
<Image
Aspect="Fill"
Source="ocean.jpeg"
HeightRequest="190"
VerticalOptions="Fill"
HorizontalOptions="Fill"/>
<Label
Margin="0,15,20,0"
VerticalOptions="Start"
HorizontalOptions="End"
WidthRequest="30"
FontSize="30"
TextColor="White"
FontFamily="Material"
Text=""/>
<pancakeview:PancakeView Grid.Row="1" Margin="0,-20,0,0" CornerRadius="30,30,0,00">
<Grid RowDefinitions="Auto,Auto,auto,Auto,10,Auto" BackgroundColor="white">
<Label Margin="9,10,6,0" HorizontalOptions="StartAndExpand">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Delhi"
TextColor="Black" />
<Span Text=" " FontSize="14"/>
<Span
FontSize="16"
FontFamily="Material"
Text=""
TextColor="Black" />
<Span
Text=" "
FontSize="Medium"/>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Kasol, Haridwar, Rishikesh"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
Margin="9,0,5,0"
Grid.Row="1"
Text="Monday, 25 July 2022 To Friday, 25 July 2022"
FontSize="11"
TextColor="Black"
HorizontalTextAlignment="Center"
HorizontalOptions="Start"/>
<Label
Margin="9,0,5,0"
Grid.Row="2"
FontSize="Caption"
Text="Safar Partner Id: Safar2022"/>
<StackLayout
Margin="9,0,5,0"
Grid.Row="3"
Orientation="Horizontal"
Spacing="15"
HorizontalOptions="Start"
Padding="5">
<Label
FontFamily="Material"
FontSize="26"
TextColor="Black"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
Text=""
FontSize="26"/>
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
</StackLayout>
<StackLayout Grid.Row="3"
Margin="0,-20,5,5"
HorizontalOptions="End"
Orientation="Vertical"
Spacing="10">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="14"
Text="Rating"
TextColor="Black" />
<Span Text=" 5" FontSize="14"/>
<Span Text=" *" FontSize="15" TextColor="Gold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<pancakeview:PancakeView CornerRadius="10">
<Label Text="View review" BackgroundColor="LightGreen"/>
</pancakeview:PancakeView>
</StackLayout>
<Label Grid.Row="4" BackgroundColor="LightGreen" Opacity="0.7"/>
<Grid Grid.Row="5">
<xct:TabView
TabStripPlacement="Top"
TabStripBackgroundColor="White"
TabStripHeight="40"
TabIndicatorColor="Green"
TabContentBackgroundColor="White">
<xct:TabViewItem
Text="Overview"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Itineary"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Safety and Security"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Terms/Conditions"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</Grid>
</pancakeview:PancakeView>
<pancakeview:PancakeView
Grid.Row="1"
VerticalOptions="Start"
HorizontalOptions="End"
CornerRadius="10,0,0,10"
HeightRequest="60"
WidthRequest="150"
Margin="0,-70,18,-10">
<StackLayout
BackgroundColor="{AppThemeBinding Dark=Gray,Light=black}" >
<Label Margin="5,5,0,3">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="12"
Text="Rs 4000"
TextColor="White" />
<Span
Text=" 50 % Off"
FontSize="10"
TextColor="Red"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Margin="5,-5,0,0">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="15"
Text="Rs 2000/"
TextColor="White" />
<Span
Text=" Per Person"
TextColor="White"
FontSize="Caption"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</pancakeview:PancakeView>
</Grid>
</ScrollView>
</ContentPage.Content>
Rather than applying a margin to every child, is there a flex way to do this?
<Grid item xs={12} xl={4} className={classes.paper}>
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
<TextField style={{margin: "8px"}} id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
CodeSandBox: https://codesandbox.io/s/material-demo-ik8gz?file=/demo.tsx
How do I apply Justify-Content to the children?
You can use Grid for TextField and use spacing to set margin:
<Grid container spacing={4} justify="center">
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
<Grid item xs={12} xl={4}>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</Grid>
</Grid>
Add the margin style to every <Textfield /> child would be fine
You can optionally achieve this via nesting selector of className
import { Grid, TextField } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
paper: {
"& .MuiTextField-root": {
margin: 8
}
}
}));
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>
I have a menupopup which when used on Windows 7 in Firefox 6.0.2 shows some space on the left. But when used with Firefox 4 and Windows XP does not show space on the left. How can I remove the space on the left?
<toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">
<menupopup>
<menuitem label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
<menuitem label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
<menuitem label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
<menuitem label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
</menupopup>
</toolbarbutton>
The menuitem should be in the center of the popup. Also, there is a thin line before the displayed label (check the above screenshot). I want to remove that line.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<row>
<toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">
<menupopup id="editItems" position="after_pointer">
<menuitem label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
<menuitem label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
<menuitem label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
<menuitem label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
</menupopup>
</toolbarbutton>
</row>
</window>
As per the documentation you can't position at the center but I would you to use your toolbar button inside a row then use any one of positioning attributes.
https://developer.mozilla.org/en/XUL/PopupGuide/Positioning
https://developer.mozilla.org/en/XUL/menupopup
https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps
Please refer to these links for further information.
By default, the <menuitem> elements will display with space for icons on the left of the <menupopup>:
You can have the <menuitem> elements display without the space for icons by adding class="menuitem-non-iconic" to each element:
However, if you look closely, there is a vertical line down the menu. You can remove this vertical line by changing the <menupopup> element to have the style -moz-appearance: none;. This can be done either in a CSS file, or as style attribute, style="-moz-appearance: none;", on the element:
Putting those together the basic code looks like:
<toolbarbutton id="search" type="menu" label="SEARCH">
<menupopup style="-moz-appearance: none;">
<menuitem class="menuitem-non-iconic" label="Web"/>
<menuitem class="menuitem-non-iconic" label="Images"/>
<menuitem class="menuitem-non-iconic" label="News"/>
<menuitem class="menuitem-non-iconic" label="Video"/>
</menupopup>
</toolbarbutton>
Using your complete code:
<toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">
<menupopup style="-moz-appearance: none;">
<menuitem class="menuitem-non-iconic" label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
<menuitem class="menuitem-non-iconic" label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
<menuitem class="menuitem-non-iconic" label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
<menuitem class="menuitem-non-iconic" label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
</menupopup>
</toolbarbutton>
Centering the text:
One interpretation of your last statement of "The menuitem should be in the center of the popup", is that you want the <menuitem> text centered horizontally in the popup. I don't think this is really what you intended. But, in case it was what you desired: you can center the text by indicating the text-align: center; style either via the style attribute or CSS:
<toolbarbutton id="search" type="menu" label="SEARCH">
<menupopup style="-moz-appearance: none;">
<menuitem class="menuitem-non-iconic" style="text-align: center;" label="Web"/>
<menuitem class="menuitem-non-iconic" style="text-align: center;" label="Images"/>
<menuitem class="menuitem-non-iconic" style="text-align: center;" label="News"/>
<menuitem class="menuitem-non-iconic" style="text-align: center;" label="Video"/>
</menupopup>
</toolbarbutton>
This results in:
I want to change the background color of the menu-button in toolbarbutton.
I applied the following code but it was not working.
<toolbarbutton id="search" background-color="red" type="menu-button" label="Search" width="83" height="25" oncommand="webSearch();event.stopPropagation();">
<menupopup>
<menuitem label="Web" value="webs" onclick="webSearch();event.stopPropagation();"/>
<menuitem label="Images" value="images" onclick="imageSearch();event.stopPropagation();"/>
<menuitem label="News" value="news" onclick="newsSearch();event.stopPropagation();"/>
<menuitem label="Video" value="videos" onclick="videoSearch();event.stopPropagation();"/>
</menupopup>
</toolbarbutton>
You should use CSS:
<toolbarbutton style="background-color: red;">
I don't think you can have background color of the button. Please check with this, you can change the color of the text not the button color.
I would suggest you to have a customized toolbar button.
https://developer.mozilla.org/en/custom_toolbar_button
https://developer.mozilla.org/en/XUL/toolbarbutton
The above links will help you to fix your problem.
<toolbar>
<toolbarbutton label="Checkbox Type" type="checkbox" image="firefox.png"/>
<toolbarbutton label="Menu Type" type="menu" popup="button-popup" style="font: bold 11px Verdana, sans-serif !important; color:#327DC7; background-color=#327DC7;" />
<toolbarbutton label="Menu Button Type" type="menu-button" popup="button-popup" image="firefox.png"/>
<menupopup id="button-popup">
<menuitem label="Item 1"/>
<menuitem label="Item 2"/>
<menuitem label="Item 3"/>
</menupopup>
</toolbar>
To know more about the toolbar menu button CSS features, you can check the Firefox dafult settings in the installation directory in your system. For example, like this:
jar:file:///C:/Program%20Files/Mozilla%20Firefox/chrome/classic.jar!/skin/classic/global/toolbarbutton.css