How to create the layout as given below?
The layouts A and B in mobile must stack one after other.
In the bigger screen the layout B must be togglable. Whereas, A adjusts to full screen or half according to the visibility of B.
My code sample
<Grid.Row>
<Grid.Column computer={16} largeScreen={10}>
<A />
</Grid.Column>
{showB && (
<Grid.Column computer={16} largeScreen={6}>
<B />
</Grid.Column>
)}
</Grid>
You would need to declare the column A width in a variable that would change depending on if column B is open or not. A solution for that is here https://codesandbox.io/s/8843zowzj9
As semantic-ui Grid.Row can have a width of 16 units, columns A would start with that width, and it would decrease if you show column B (by the width you desire) or increase once you hide it.
The stackable columns={2} attributes in the Grid tag makes this clever enough to also make them stack once the screen reaches a mobile resolution.
Related
Uno says it is 'Pixel Perfect Everywhere'.
So I created a canvas with width 320 and height 320 and placed some buttons inside, one in each edge.
Now when I start the app, on Android or IOS, the canvas is bigger than the screen, and the buttons on the right side don't show at all.
But my iPhone8 and my Samsung S9 have a far bigger screen resolution than just 320 by 320.
The whole canvas gets scaled by something, and even the window bounds of the main window are far smaller than my screen resolution.
My questions:
Can I turn off the scaling and use the real resolution?
Is there a property where I can get the scaling factors, so I can resize my canvas and just calculate everything to the scaled size?
Layouting values like Width and Height in Uno/WinUI Xaml are defined in 'logical pixels', as distinct from 'physical pixels'. Since devices with similar physical dimensions may have wildly different physical pixel densities, logical pixels are a better way to specify layout dimensions in most cases.
Make sure you understand Xaml's layouting system - you normally shouldn't hard-code the dimensions at all when you're stretching content to the width of the screen. For example:
<Grid HorizontalAlignment="Stretch"
Height="320">
<Button Content="Button1"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Button Content="Button2"
HorizontalAlignment="Right"
VerticalAlignment="Top" />
...
</Grid>
All that said, in the very rare cases that you do need to work with device-dependent physical pixels, you can use the DisplayInformation class and its properties, eg:
var displayInformation = DisplayInformation.GetForCurrentView();
var scaleFactor = displayInformation.RawPixelsPerViewPixel;
...
I am working with Material-UI tabs. Thanks for the help of others in the threat at Creating a Material-UI tab with image tabs instead of text labels, I was able to get images working for my tabs but I cannot control the width of the tabs no matter how small I make the images - the tabs do grow in width if I make the images larger.
I have a Code SandBox at https://codesandbox.io/s/lucid-stonebraker-q1r4v?file=/src/App.js that demonstrates the problem.
I did manage to set the width of the tabs using inline styles but it just clipped the content to the right rather than centering the image in the narrower tab.
Without the inline style, there is a responsive breakpoint at about 600 pixels. Below the breakpoint, the tab width is about 72 pixels. Larger than the breakpoint, the tab width is about 160. I just guessed these numbers by measuring a different browser window and overlying this app on it. If I do manually force the width with the inline style, I can see that the image location still moves at the breakpoint as though the underlying width that the images are centering to is the original tab width as though I hadn't forced the width.
I settled on these exact numbers of width because the visual measurement matched very close to two min-width numbers in the Material-UI tab.js source code. It could be coincidence. I actually did try changing those in the source code and testing again but they had no effect on the breakpoint behavior so I put the file back to original.
If it's at all possible, I'd like to be able to set the width to my own needs, set margins/padding to my own needs, and still have the images centered in the result.
Ciao, to center the image on Tab you have to pass a style to flexContainerVertical class on Tabs in this way:
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
classes={{
flexContainerVertical: classes.flexContainerVertical // pass the class flexContainerVertical
}}
>
Then on your makeStyles:
const useStyles = makeStyles((theme) => ({
...
flexContainerVertical: {
display: "flex",
alignItems: "center",
}
}));
And Tab images will appear on center of the Tab.
Here your codesandbox modified.
I am having a little problem using Grid Component in React JS Project, I will start by writing some code and explain after what I want to achieve using images :
let say that this is the code rendered :
<div style="margin:100px 20%; width:80%" >
<Grid container>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
</Grid>
</div>
And here is how it looks let's say ( My Grids in Red and the big div in black ) :
When I resize my window and make it smaller this is how it looks :
I know there is a problem in my proper Element and it is easy because I made its CSS, but I dont know how to control Grids attribute now, because I want that the xs changes from 6 to 12 at a certain position.
How to do so ? if it is not possible, is there a better solution ?
Any help would be much appreciated.
Depends on what size you want it to break from 6 to 12, but it's as simple as putting the right prop values in:
<Grid item xs={12} sm={6}>
Be sure to read the full use case here: https://material-ui.com/layout/grid/
I have four rows and two columns.I need to display the background image to full grid.Please provide me solution.I had referred this creating background image in content page link:Xamarin Forms - how to add background image to a content page
.But how to set background image to grid layout.
Just add the Image to the first row and column, set ColumnSpan and RowSpan to cover your entire grid and set the Aspect to AdjustFit.
Then you add the other items you want to add to the grid.
A grid cell can hold more than just one element, however keep in mind that the last item in a cell will end up on top of the items having been added earlier.
For example:
<Grid>
<Image>
<Button>
</Grid>
The button is the last item in the order, so it will become the topmost item and be clickable. If you had the button first and the image last, the image would cover the button, which therefore would not be clickable.
You will have to do some AbsoluteLayout trickery here:
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" AbsoluteLayout.LayoutFlags="All" InputTransparent="true" Source="Your_Image" Aspect="AspectFill" />
<!--Your Grid Here-->
<Grid AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" />
<AbsoluteLayout>
See to it that you place the image first in absolute layout so that it goes in the back,
and set its input transparent so it does not take any click events.
I've got a back button in row 0, col 0 of a grid.
It places itself up at the top of the cell; I want it in the center. I tried setting VerticalAlignment="Center" and that didn't work. Neither did setting it to "Bottom":
<Button x:Name="buttonBack" VerticalAlignment="Bottom" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"></Button>
...It doesn't budge a bit. How can I pull it down a scosh?
Make sure you are not setting your row height to Auto sizing. If use Auto, the BackButtonStyle sets a bottom margin to 36 which make it appear that your button is "pinned" to the top of the row. It looks like you should be able to "move" it because with the bottom margin space, but you can't because the row is auto sized.
I placed your exact markup with the BackButtonStyle into a grid and I can position it however I want as long as I am using pixel or star sizing on my row.