<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."
Related
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>
In MUI Grid, to space Grid Item vertically, I provided spacing in Grid Container. It looks good on big screens but on mobile, it results in awkward horizontal spacing between Grid Items.
<Grid container spacing={24}>
<Grid item xl={6} md={6} sm={12} xs={12}>
<TextField
required
id="outlined-email-input"
label="Customer Name"
name="email"
fullWidth
/>
</Grid>
<Grid item xl={6} md={6} sm={12} xs={12}>
<TextField
required
id="outlined-email-input"
label="Customer Name"
name="email"
fullWidth
/>
</Grid>
</Grid>
How can I have different vertical and horizontal spacing in Grid?
You must understand how grid works internally. Material UI Grid layout is based on the flexbox model. So, setting container attribute on Grid, sets "display flex" on it. Now items in this flex box can either flow horizontally or vertically, thus either horizontal spacing can be given or vertical spacing can be given but not both.
If you set "direction" attribute to "column" on Grid as shown:
<Grid container direction={'column'} spacing={24}>
<Grid item xl={6} md={6} sm={12} xs={12}>
<TextField
required
id="outlined-email-input"
label="Customer Name"
name="email"
fullWidth
/>
</Grid>
<Grid item xl={6} md={6} sm={12} xs={12}>
<TextField
required
id="outlined-email-input"
label="Customer Name"
name="email"
fullWidth
/>
</Grid>
</Grid>
Then spacing provided will act as vertical spacing between the items and items will be arranged vertically.
Now If items are required to arrange horizontally then above code will be changed as shown:
<Grid container direction={'row'} spacing={24}>
<Grid item xl={6} md={6} sm={12} xs={12}>
<TextField
required
id="outlined-email-input"
label="Customer Name"
name="email"
fullWidth
/>
</Grid>
<Grid item xl={6} md={6} sm={12} xs={12}>
<TextField
required
id="outlined-email-input"
label="Customer Name"
name="email"
fullWidth
/>
</Grid>
</Grid>
Here, in this implementation spacing will act as horizontal spacing. Also, this is the default implementation if in case you not specify "direction" attribute.
Now to switch between 2 layouts in mobile and desktop, we can do it as:
Implement a css class using media query that set "display" to "none" for mobile type device and "initial" for desktop type device. Let's name it "display-lg". And in similar way, make class "display-sm" that show element on mobile and hide it on desktop. Apply "display-lg" on grid layout that is to be shown on desktop and "display-sm" on grid layout that is to be shown on mobile.
This approach may seems you long and redundant but it provides you liberty to add more mobile specific changes in your layout in future.
Please feel free to comment if you need more clarity on answer.
This is possible in MUI v5, simply use rowSpacing and columnSpacing instead of spacing. See this example from the docs:
<Grid container rowSpacing={1} columnSpacing={3}>
<Grid item xs={6}>
<Item>1</Item>
</Grid>
<Grid item xs={6}>
<Item>2</Item>
</Grid>
<Grid item xs={6}>
<Item>3</Item>
</Grid>
<Grid item xs={6}>
<Item>4</Item>
</Grid>
</Grid>
Live Demo
Yeah I am wondering the same thing, the docs imply that Grid is based on a 12 "column" layout. So when you want a 75/25 split horizontally between two components its as easy as xs={8} and the other set at xs={4}.
I think OP is asking how to do the same thing but vertically. I too am searching for a solution, but I believe the method does not lie within the Grid component. Will try to use additional CSS to solve the issue I have.
EDIT:
Yup, looks like there is no way to do this within the component itself.
From the documentation
The properties which define the number of grids the component will use for a given breakpoint (xs, sm, md, lg, and xl) are focused on controlling width and do not have similar effects on height within column and column-reverse containers. If used within column or column-reverse containers, these properties may have undesirable effects on the width of the Grid elements.
The components have a attribute called gap, you can pass a string as value, similar to the CSS Grid and CSS FlexBox.
<Grid gap="20px 50px">
//Grid items...
</Grid>
I'm developing the DMS windows UWP application In which I want to show a user information on DataGrid. For this I am using MyToolkit.Controls.DataGrid. I want to change the header size and give the border for header. I also want to change the list items font size. so any one have a full style for DataGrid. how to hide the DataGrid column ?
the header size and give the border for header.
The header is object type that mean you could custom it's content. If you want to add border you could refer the following code. But MyToolkit does not support modify the header size.
<controls:DataGridTextColumn
Width="200"
Binding="{Binding Lastname}"
IsAscendingDefault="False"
>
<controls:DataGridTextColumn.Header>
<Border BorderThickness="1" Padding="5,5,5,5" BorderBrush="Red" CornerRadius="5">
<TextBlock Foreground="Green" Text="Lastname" />
</Border>
</controls:DataGridTextColumn.Header>
</controls:DataGridTextColumn>
change the list items font size
If you just want to change the list items font size, you could edit DataGridTextColumn FontSize property.
<controls:DataGridTextColumn
Width="200"
Binding="{Binding Firstname}"
FontSize="25"
Header="Firstname"
/>
how to hide the DataGrid column ?
Just set with property as 0.
<controls:DataGridTextColumn
Width="0"
Binding="{Binding Firstname}"
FontSize="25"
Header="Firstname"
/>
In my Xamarin.Forms application, I have an Image and a Label:
<Image x:Name="myImg"/>
<Label x:Name="myLabel"/>
I want the width of the Image to be the same as the width of the Label (the text of the Label is determined at runtime). How can I do this?
You should be able to accomplish this by binding the Image's WidthRequest to the Label's Width property.
<Image x:Name="myImg" WidthRequest="{Binding Source={x:Reference myLabel}, Path=Width}" />
<Label x:Name="myLabel" />
I have a UX class called InputWithLabel that includes both a label and a TextInput.
I am trying to add an 'X' to it that can be used to clear the input text. My plan is to later add the functionality to only display this 'X' when there is actual text in the input field.
For now though, I can't figure out how to do this while not allowing the input to go over top of the 'X'. If you think it's a bug, I'll clean it up and report it as such but I suspect it's just something simple I don't understand so I thought I'd just ask you about it... I tried a number of ideas but none of them seemed to work for me...
<StackPanel ux:Class="InputWithLabel" Width="50%">
<string ux:Property="Label" />
<string ux:Property="Value"/>
<string ux:Property="IsPassword"/>
<Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/>
<Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf">
<TextInput FontSize="16" Value="{Property Value}" IsPassword="{ReadProperty IsPassword}"/>
<Panel ux:Name="ClearButton" Alignment="Right">
<Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf">
<Rotation Degrees="45"/>
</Rectangle>
<Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf">
<Rotation Degrees="-45"/>
</Rectangle>
</Panel>
</Rectangle>
</StackPanel>
There is no bug, it's all about understanding how layout works in Fuse. When you put a TextInput along with a Panel in a Rectangle, they both occupy the same space. There is no implicit space consumption happening (by design). The result of that is, as you can see, that things go over one another.
To achieve what you need, it would be a far better strategy to go with a DockPanel, because inside of a DockPanel you can explicitly consume space by docking its children to its sides. Here's an example, based on the code you initially posted:
<StackPanel ux:Class="InputWithLabel" Width="50%" IsPassword="false">
<string ux:Property="Label" />
<string ux:Property="Value"/>
<string ux:Property="IsPassword"/>
<Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/>
<DockPanel>
<Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf" Layer="Background" />
<TextInput FontSize="16" Value="{Property Value}" IsPassword="{ReadProperty IsPassword}" Margin="4">
<WhileContainsText Invert="true">
<Change clearButton.Visibility="Collapsed" />
</WhileContainsText>
</TextInput>
<Panel ux:Name="clearButton" Dock="Right">
<Rectangle SnapToPixels="True" Height="1px" Width="10pt" Color="#bdbebf">
<Rotation Degrees="45"/>
</Rectangle>
<Rectangle SnapToPixels="True" Height="1px" Width="10pt" Color="#bdbebf">
<Rotation Degrees="-45"/>
</Rectangle>
</Panel>
</DockPanel>
</StackPanel>
You'll notice I also included UX code for only showing the close button when there's some text in the input. Cheers!
You're welcome to visit Fuse docs to read more about Layout in general and Responsive layout in particular for useful details on the topic.