I'm playing around with Material UI (Creative Tim's theme) and got stuck at this... I have a <Grid> with two <GridItem>s inside. One of the (the left one) is the "primary" one, whereas the right one appears occasionally. My question is how to animate the right ones appearing?
So far I have this:
<Grid>
<GridItem
md={isViewDetailsMode ? 7 : 10}
className={classes.collapsible}>
{...}
</GridItem>
<GridItem
md={4}
className={isVisible ? classes.visible : classes.hidden}>
{...}
</GridItem>
</Grid>
classes.collapsible: {transitionDuration: "0.3s"}
classes.visible: {transitionDuration: "0.3s"}
classes.hidden: {display: "none"}
It sorts of works, but as the left one is shrinking, the right one appears beneath the left one and after the transition is finished it takes its place on the right.
Any suggestions? Here is a CodeSandBox.
Thank you.
Related
I work in solid-js and I would like to add a floating button to the far right of a screen in my application. After reading this article on creating floats in Tailwindcss..., I wrote the following code:
export default function SearchEngine() {
return (
<>
...
<BsChatLeftTextFill size={41} class="float-right text-blue-500 "/>
</>
);
}
This did create a button on the far right of my app, but when I scroll down the tab bar, my button position is influenced by it. In my opinion, given that this is a floating button, the button should remain visible at the far right of my application despite scrolling the page, in its initial position and this is the behavior I expected. I looked on the Tailwindcss documentation, but the property I'm using is indeed the correct property.
Here is my solution:
<BsChatLeftTextFill size={41} className="fixed bottom-3 right-14 text-blue-500 " />
The word to remember is the word fixed which allows you to maintain the same position despite scrolling. The words bottom-3 and right-14 are used to determine the position of the fixed element relative to the left and the bottom. It is also possible to determine the position relative to the top and to the right thanks to the keywords top-x and left-x
I found that hiding the status bar (at least on latest iPhones) does not make much sense since the space on top is partially consumed e.g. by the camera.
Similar issue at the bottom: there is a 'swipe bar' where some space should be left for.
Hence my question: what's the correct way to leave the right amount of space for the status bar on top of the iPhone screen and the 'swipe bar' at the bottom of an iPhone screen?
Thanks in advance
Indeed, making sure that app content isn't obscured by the 'notch' or the bottom swipe area on current-generation iPhones (and some newer Android devices as well) is an important consideration.
Uno Platform handles this using the VisibleBoundsPadding behavior. You can attach this behavior to any compatible container (eg a Panel or Border) and the content of the container will be padded such that stays within the 'safe' area of the screen.
In general you should place all 'content' in your application (eg text, images, interactive elements) within the VisibleBoundsPadding area, but some visual elements eg a full-screen backdrop might go outside of it.
You can place VisibleBoundsPadding anywhere you wish in your app (including multiple locations), though generally it makes sense to place it on or near a root element. It will adjust automatically to rotations and other layout updates.
Here's a simple example:
<Page x:Class="UnoTestbed20.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UnoTestbed20"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="using:Uno.UI.Toolkit"
mc:Ignorable="d">
<Grid Background="LightBlue" toolkit:VisibleBoundsPadding.PaddingMask="All">
<Border Background="LightYellow">
<TextBlock Text="Hello, world!"
Margin="20"
FontSize="30" />
</Border>
</Grid>
</Page>
And the resulting display on an iPhone 11:
I wanted to create a layout where when the divs reach the bottom they will continue from the top. See my (super fancy) image I drew:
I got it working by using column-fill: auto. And now I'd like to add a dimmer on each item when being clicked. I'm using React and Semantic UI React for my app so I'm trying to achieve this with their Dimmer component.
My problem is that when I active the dimmer, it's not "dimmering" the whole item. I made a small CodeSandbox for my problem so we can debug this more easily. When you press the third item you can see that the part who is coming from the top is not dimmed. I assume it because the position of the dimmer is relative.
LINK: https://codesandbox.io/s/semantic-ui-react-yl0dj
I hope I described my issue well enough and that we can solve this together.
Cheers!
I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.
But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.
Here is my CodeSandBox.
Many thanks
Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further
Please take a look at this, I want to put each button in new line in this case :
Small screen test
They seem to line up - what is the problem?
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/