my sidebar
<div className="w-96 h-screen overflow-x-visible overflow-y-auto" >
<SidebarContent/>
</div>
in sidebar content
menuname1 ...
menuname2 ...
these "..." my tooltip.tooltip content will open when hovering. but my sidebar overflow y hidden. if sidebar content relative , tooltip does not export content. if sidebar content not relative , tooltip export content but It does not open at the menu level, as if there is no scroll, it opens in hard places.
<div className="relative z-auto">
<div className="absolute bg-pink-200 left-72 z-50">tooltipcontent</div>
</div>
Both my sidebar will be fixed and overflow y hidden, and when the tooltip is opened in the sidebar, it will also appear outside the sidebar. How can I do that? in React
Related
How can I make the height and width of a div grow and shrink with their aspect ratio while resizing the window?. I'm using tailwind css with next JS and I want to make my div responsive while resizing the window, and in doing that I need the height to shrink as well. how is that possible?
<div className="relative flex -z-10 h-auto w-72 object-scale-down">
<Image src={"/profile.webp"} fill objectFit="cover" />
</div>
I'm using an image as a content for the div.
I am having difficulty containing a video element inside my flexgrid. I am simply trying to organize my page to have the navbar at the top of the screen, with a background video playing below it, filling the rest of the screen. Currently I am able to center my navbar over the video, but the video is causing scrolldown functionality. When I replace the video with a simple text object, everything appears to work fine.
// Navbar is a component
<div className='flex flex-col min-h-screen min-w-full'>
<div><Navbar/></div>
<div className='flex-1'> // Should expand the remainder of the screen height
<video src="videos/Demo-Video.mp4"
autoPlay
loop
muted
className='object-cover' // Is supposed to shrink or expand the video the length of the parent div
>Your browser does not support the video tag.</video>
</div>
</div>
not tested, but removing the div wrapping the video might help, or scaling the video to fit that div.
// Navbar is a component
<div className='flex flex-col min-h-screen min-w-full'>
<div><Navbar/></div>
//<div className=''> // Should expand the remainder of the screen height
<video src="videos/Demo-Video.mp4"
autoPlay
loop
muted
className='flex-1 object-cover' // Is supposed to shrink or expand the video the length of the parent div
>Your browser does not support the video tag.</video>
//</div>
</div>
I'm trying to do the infamous center operation both vertical and horizontal and have sorta succeeded in doing so.
I'm trying to render a simple react component on my page that will show a 404 message. I want this message to be centered. The way I managed to do this some whitespace is leftover resulting in vertical scroll bars showing up. Ofc I could get rid of them using something like overflow-hidden, but surely there must be a way to center this message perfectly just using a better structure or certain bootstrap classes.
Here is my component:
const NotFoundPage = () => {
return (
<div>
<NavbarComp />
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
<div>
<h3 className="m-4">
<Badge variant="primary">404</Badge> Page not found...
</h3>
<Link to="/">
<Button variant="secondary">Go to main page</Button>
</Link>
</div>
</div>
</div>
);
};
In the end, I don't care that the scrollbars appear but it bothers me that this positional issue keeps occurring for me in some form or another and I wanna learn to put an end to this :)
You have already figured out how to center your "Not Found" message. What's messing it up for you is the Navbar, which you can test by taking it out. You will notice that the scroll bars disappear.
This class min-vh-100 gives the flex box below the Navbar the height of 100% of the viewport, which avoids adding any scrolls bars. The issue is that Navbar barges in and throw the page off blalance by attaching itself to the top. So the amount of srolling is exactly the height of the Navbar and since it's empty, there is very little scrolling.
An intutitive solution is to put your Navbar INSIDE the flex box. But that won't work in your case, because of how your flex box adjusts items. So I will give you a simpler solution, which should be viewed as more of a work-around.
Bootstrap does not come with classes such as min-vh-95 or min-vh-80, but luckily they are super easy to create. You can add this class to your custom CSS:
.not-found-container {
min-height: 95vh !important;
}
(or you could just stick to the naming convention and name it min-vh-95 for example)
And then change the flex box classes from:
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
to
<div className="d-flex align-items-center justify-content-center text-center not-found-container">
Here is a Sandbox to illustrate the idea: https://codesandbox.io/s/peaceful-sanne-e3m9w?file=/src/App.js
Obviously the min-height value would need to be adjusted based on the height if your Navbar.
I have in React a tooltip component that is wrapping a button component.
How can I position the tooltip relative to the button position?
<div class="tooltip">
<div class="button"></div>
</div>
Here is a codesandbox you can play with.
You cannot do that with the way your markup is structured. I would suggest you making a div that wraps both the elements.
<div class="wrapper">
<div class="button"></div>
<div class="tooltip"></div>
</div>
You would then apply position relative to the wrapper element. Then you can use position absolute on the tooltip to position it however you want it according to the wrapping div.
How can i remove navigator toolbar from top on single page index.html, but i want ons.navigator.pushPage functionality for some button on index.html is it possible?
It can be achieved by hide-toolbar="true" on index page and get back false on page1 , but after move to page1, i am not able to view left button on top header, and ons.navigator.popPage() is also not working on my button.
You can vanish navigation bar by
index.html
<ons-navigator page="foo.html" hide-toolbar=true></ons-navigator>
http://onsenui.io/guide/components.html#navigator
And in order to display ons-navigator html on next.html, write this in foo,html
foo.html
<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Navigation Bar</h1>
</div>
</div>
<br><br><br>
<div class="topcoat-navigation-bar topcoat-navigation-bar--bottom">
<div class="topcoat-navigation-bar__line-height" style="text-align:center">Bottom Toolbar</div>
</div>
http://onsenui.io/themes/#navigation-bar