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.
Related
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.
I have a RaisedButton which has a child Text and some Padding inside.
When I press the button, I'm using an AnimatedBuilder and Container to resize the width of the container to show a loading indicator.
return Container(
height: widget.height,
width: lerpWidth(widget.width, minWidth, _animation.value),
)
Now the problem is that I don't want to use a fixed width for my container since the text can be variable from length (translations, showing numbers, ..). If my passed-in string length would be bigger then the Container would not scale with it. I also don't want my button to expand the whole width of the screen.
So basically I want to expand my button to the minimum width of the child (including padding) and use that width to animate the container to show a CircularProgressIndicator
I'm using flutter
I'm having 2 widget A and B with position like photo above.
How can I move widget B overlay widget A when touch or swipe-up from widget B and back when swipe-down?
Make a GestureDetector and give it a stack as a child. Create a variable in your class thats called y or whatever name you want.
In your stack make 2 positioned widgets.
positioned(
top: 0
left: 0
),
positioned(
top: y
left: 0
)
make your two Widgets A and B childs of the positioned. Widget B has to be in the second positioned for it to overlay the first.
Make an AnimationController in your class and set its start value to 0 and its end value to the y. Use the onVerticalDragDownmethod of the GestureDetector to detect vertical swipes and check if it was from top to bottom or from bottom to top. If it was from bottom to top call animationController.reverse();, if it was from top to bottom call animationController.forward();. In the animationController Listener call setState((){y = animationController.value}). If you dont want it to be animated just set y to the values that you need.
Stack Learn about => https://api.flutter.dev/flutter/widgets/Stack-class.html
A widget that positions its children relative to the edges of its box.
This class is useful if you want to overlap several children in a
simple way, for example having some text and an image, overlaid with a
gradient and a button attached to the bottom.
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!
Since nowrap on td element doesn't seems to work in IE, see this question, I am in desperate need of help how to add a span element with nowrap to every cell in a Dojox Datagrid without having to define field formatters to accomplish this.
See jsfiddle here http://jsfiddle.net/HkxHZ/4/
Using this css I get what I want in Chrome and FF, i.e. no word wrap and overflow hidden. But it doesn't work in IE..
<style type="text/css">
.dojoxGridRowTable {
table-layout: fixed;
width: 0px;}
.dojoxGrid .dojoxGridCell {
text-align: left;
overflow:hidden;
white-space:nowrap;}
</style>
This method is like auto-size in that is will make the width of each column in the DataGrid big enough to show your data with no wrapping.
What you should do is calculate the proper width for each column of the grid layout based on PX size of the text in the column description and data for that column. This should be done before creating the grid layout.
Here is how you get the proper width in px. Add the following html to your page:
css:
#test
{
position: absolute;
visibility: hidden;
height: auto;
width: auto;
}
<div id="test"></div>
1) Get the font size used in your DataGrid
2) Get the div object and set the font size to what is used in the grid
<div id="test"></div>
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = grid_fnt_sz;
3) Place each column description and data item intended for your DataGrid into the hidden div:
tst_item.innerHTML = "Your data";
var widthPX = (tst_item.clientWidth + 1); //Width of text in PX
Store this widthPX in an array for each column keeping only the largest found for the column.
4) When creating the layout for your grid, set the width for the column to the largest width from your column description and data for that column.
This method ensures that width of each column will be big enough to show your data without wrapping. Depending on your needs, you can tweek the logic to do what you need. This might not be feasible with large amounts of data. But, it works great for me.