.NET MAUI How to set CollectionView items Padding to 0 - maui

I can't set padding to 0 in items of CollectionView in MAUI.
In this example, I use Data and Data[i].Color as follow:
<CollectionView
ItemsSource="{Binding Data}"
ItemSizingStrategy="MeasureFirstItem"
ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<Button
Clicked="Button_Clicked"
WidthRequest="10"
HeightRequest="10"
BackgroundColor="{Binding Color}" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
My Buttons has Width 10 and Height 10, and there is space between my Buttons. Only set Button Width more than 100 can I see no space between my Buttons, but 100 is too large.
I tried to set Padding or Margin in Button, and WidthRequest in CollectionView, but it didn't work.
How can I remove the space?
I tried ItemSpacing:
<CollectionView.ItemsLayout>
<LinearItemsLayout
Orientation="horizonal"
ItemSpacing="0" />
</CollectionView.ItemsLayout>
But fail.

You want to set the space between buttons to 0 in CollectionView. And this is a known issue and it's been tracked in Windows CollectionView ItemSpacing is not working. When setting the property ItemSpacing to 0, the space between the items should have been reduced to 0, however it doesn't work as expected.
For more details, you can refer to MAUI: How to reduce spacing between buttons.

Related

How can I offset a MUI Popover component from an anchorEl?

With anchorOrigin, I can give a MUI Popover an offset with anchorPosition.top and anchorPosition.left. But this has no effect when I'm using an anchorEl (i.e., attaching the popover to a trigger element), not an anchorOrigin (i.e., using absolute positioning).
It seems I can do this with the MUI Popper
(see this issue), but not very easily with the popover. I want the clickaway functionality so apart from this positioning difficulty I prefer the popover.
What's the best way to attach to an element but shift the popover (say, down and right)?
You can just pass a number to the horizontal and vertical properties to have them offset with respect to the top-left corner of the anchor element, like this:
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 100,
}}
>
<Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>
this will open the popover 100 pixels to the right of the left margin of the anchorEl.

material ui : reactjs: TextField: Multiline: How to show minimum number of rows and after than no scroll

In material ui Texfield for multiline. I want to show a minimum 3 rows in the beginning and there up expand the text area. I dont want to show scroll if the rows exceed 3
I tried this
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
rows={3}
defaultValue="Default Value"
variant="outlined"
/>
What is see is
HOw to set min rows.
To increase the height, instead of showing scroll you can make use of maxRows prop instead. so the scroll would be added after the maxRows are reached
https://codesandbox.io/s/material-demo-forked-ccchw
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
rows={3}
defaultValue="1"
maxRows={10}
variant="outlined"
/>
Add minRows to the TextField component
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
rows={3}
defaultValue="Default Value"
variant="outlined"
maxRows={3}
/>

Alignment of injected buttons on sap.m.table

I have a table (sap.m.table) and am using the delete table mode (mode="Delete") and am also including the edit feature by setting the ColumnListItem type to (type="DetailAndActive")
<Table id="usersTable" mode="Delete"
...
<ColumnListItem type="DetailAndActive" vAlign="Middle" detailPress="onEdit" highlight="{= ${users>EmailConfirmed} === true ? 'None' : 'Error'}">
I have 2 lines per row as I have an objectidentifier as 1 of the cells:
<ObjectIdentifier title="{users>Email}" text="last: {path: 'users>LastLoggedOnUtcDate', formatter: '.formatDateTime'}"/>
When displaying I get the following outcome:
The button alignment is out - the edit button is vertically aligned at the top while the delete button is vertically aligned in the center.
As you can see I have set vAlign to Middle on the ColumnListItem.
I would appreciate any help for aligning the edit button in the center too?
Thanks!

Adjusting CFWindow position on the screen, is it possible?

I try to use cfwindow to deliver an error/warning message to my users. It works but the only problem is the pop up window is off the screen all the way to the bottom sinking to the task bar.
I thought I can use the x and y attributes but I tried them and they did not work.
Is it possible to adjust the positioning of cfwindow at all so when it shows up it will be in the middle of the screen or at least in the middle up instead of sinking down below?
<CFTRY>
<cffile action="upload" filefield="uploadfile" destination="#TempDestination#" nameConflict="overwrite" result="myupload">
<cfdump var="#myupload#">
<CFCATCH type="Any">
<cfwindow initShow="true" title="Minute Upload Problem" center="true" height="200" width="400"
x="880" y="850"
bodyStyle="font-family: verdana; color: ##000000; font-size: 13;"
headerStyle="font-family: verdana; background-color: ##ff0000; color: ##ffffff"
resizable="False" name="NoPermission">
<!--- message --->
<div align="center">
Destination Folder may not be set to accept your file<br>
Please contact the webmaster.
</div>
</cfwindow>
</CFCATCH>
</CFTRY>
To fit the window as per x & y coordinates, you will have to set
center="false"
If center is set to true, then it will take precedence over the x & y coordinates. I have set center="false". Now, the position of the new popup windows changes, as I change the x & y coordinates.

TYPO3 Fluid: f:image trim image then scale

I have a square image of 1200x1200px. Now I want to cut off / trim all sides by 80px and then scale it down to 275px. How is this possible?
<f:image src="path/to/image.jpg" width="275c" />
This just scales down the image, so I took a look at the imgResource Core Documentation that told me, you can crop images by substracting x percent.
<f:image src="path/to/image.jpg" width="1120c-93" height="1120c-93" />
93% of 1200px are roughly 1120px.
Next try was to first crop, then scale, but it seems that I'm not able to trim a square image at all.
<f:image src="{f:uri.image(src: 'path/to/image.jpg', width: '1200c-93')}" width="275" />
Does anyone have any suggestions how to solve the problem?
Edit
So I tried the following with fixed width and height:
<f:image src="{f:uri.image(src: '{item.imagePath}image_001.jpg', width: '1120c-50', height: '1120c-50')}" width="275" height="275" alt="{item.name}" />
<f:image src="{item.imagePath}image_001.jpg" alt="{item.name}" width="275" alt="{item.name}" />
But this gives me two identical images: http://img545.imageshack.us/img545/204/nsuo.png
You have to specify an explicit height in the inner call and the crop values must be smaller than the original image size. So try this one:
<f:image src="{f:uri.image(src: 'path/to/image.jpg', width: '1120c-93', height: '1120c-93')}" width="275" alt="" />