This is how my problem looks like (see the ring) :
View Image
Using the Chrome's inspector found that it is related to --tw-ring-shadow.
So I tried adding classes like ring-0 and ring-offset-0 (as you can see below) but it didn't work!!
import { TextField } from "#mui/material";
function ContactForm(): JSX.Element {
return (
<div className="form-container pt-12 flex flex-col items-center">
<div className="input-row">
<TextField
className="ring-offset-0 ring-0"
label="First Name"
variant="outlined"
/>
</div>
</div>
);
}
export default ContactForm;
Do you have any idea for how can I get rid of this annoying border that overlaps the input field??
I'd appreciate your help!
You could try overriding the Tailwind CSS variable for input fields by adding the following in your application's CSS:
input {
--tw-ring-shadow: 0 0 #000 !important;
}
Alternatively...we can't see the code generated by <Textfield> to ensure that your Tailwind utility classes are being applied correctly to the input element, but if they are not, you could try targeting the <input> field directly using #apply in your CSS file:
input {
#apply ring-offset-0 ring-0
}
I am trying to experiment with Bootstrap 5 within React, but somehow fail to understand the padding and margin. Consider the following code:
const Breadcrumbs = (props) => {
return (
<div className={"bg-dark rounded-start"}>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="https://somelink.com">
Library
</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
)
}
Its a Component which is later on shown in a Container. I chose a dark background to better show the issue. With this code, the Breadcrumbs render like this:
Now I want them to have some padding within the surrounding box, lets say only in vertical direction. According to the Spacing documentation I should be adding modifier classes, for example py-2 which should add a Padding to both top and bottom to $spacer * .5. When applying the additional class like this:
const Breadcrumbs = (props) => {
return (
<div className={"bg-dark py-2 rounded-start"}>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="https://somelink.com">
Library
</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
)
}
It now looks like this:
My question now is: how can I add padding that keeps the Breacrumbs vertically centered within the surrounding div?
//Edit: I think I found something. The <ol> element created by Breadcrumb has a margin-bottom set. How can I remove that?
I'm trying to build this split layout with Tailwind and React:
But after countless attempts, I only managed to achieve this layout. Using the exact same styling with an image instead of a video works, but I'm unaible to scale / stretch the video container.
I'm under the assumption that this might be related to the width and height properties of the ReactPlayer component, but every attempt to set these at different percentages in order to improve the layout failed.
<div className="bg-green w-full md:w-1/2 order-first lg:order-last md:order-last">
<ReactPlayer
url= {TennisVideo}
className="object-contain h-screen md:h-screen lg:h-screen xl:h-screen w-full "
width='100%'
height='100%'
playing={true}
muted={true}
loop={true}
config={{ youtube: { playerVars: { disablekb: 1 } } }}>
</ReactPlayer>
</div>
Can anyone point me in the right direction?
https://codesandbox.io/s/sharp-hugle-vpuvr?file=/src/App.js
I would imagine that object-contain is a culprit, and should instead be object-cover. More info in the docs here
I have an area of my Next.js app which is the selected photo of a photo gallery so it has to stay fixed in size as people flip through the selected image or a photo is loading. I have a responsive layout but if really pressed, I'd say that this pixel area is 566px*425px.
I'm confused about how to actually do this. Here's the closest I've been able to get it, but the problem is that I get overflow of the image when the aspect ratio exceeds 566x425 and for images that have an aspect ratio below 566x425 it will stretch it in the Y direct. What I really want is to have a fixed box and then if the aspect ratios differ from the max size, you'll see letterboxes either along the sides or on the top and bottom.
<div
style={{
position: 'relative',
width: '566px',
height: '425px',
}}
>
<Image
src={currCommit.image.url}
alt="Current Image"
layout={'fill'}
objectFit="cover"
/>
</div>
Ooh I got it! The key was to set the parent div to a fixed size and relative and then set the Image to a layout of fill and an objectFit of contain. The only downside to this approach is I need to set media queries so it will scale for smaller sizes.
<div className="relative item-detail">
<Image src={currCommit.image.url} alt="Current Image" layout={'fill'} objectFit={'contain'} />
</div>
Then in the css I set:
.item-detail {
width: 300px;
height: 225px;
}
there's better solution i think, NextImage have callback property onLoadingComplete:
A callback function that is invoked once the image is completely loaded and the placeholder has been removed.
The onLoadingComplete function accepts one parameter, an object with the following properties: naturalWidth, naturalHeight
you can use the natural properties to set image ratio without loosing NextImage's layout functionality like this:
const NaturalImage = (props: ImageProps) => {
const [ratio, setRatio] = useState(16/9) // default to 16:9
return (
<NextImage
{...props}
// set the dimension (affected by layout)
width={200}
height={200 / ratio}
layout="fixed" // you can use "responsive", "fill" or the default "intrinsic"
onLoadingComplete={({ naturalWidth, naturalHeight }) =>
setRatio(naturalWidth / naturalHeight)
}
/>
)
}
the only downside is the aspect ratio applied only after image loaded, so the placeholder using the default ratio (in this case 16:9 - common), and this can cause CLS
Next13 onwards, layout and objectFit have been deprecated in favour of intrinsic style properties. This actually makes our job easier as you can now style the image like regular CSS, like so:
import Image from "next/image";
<div style={{ position: 'relative', width: '566px', height: '425px'}}>
<Image fill
src={currCommit.image.url}
alt="Current Image"
style={{objectFit: 'cover'}}
/>
</div>
According to bayu's asnwer,
You can create a custom component called RatioNextImage and use it like.
<RatioNextImage src={put_your_URL_here} alt={put_the_alt_here}/>
In RatioNextImage.tsx
import NextImage from "next/image";
import { useState } from "react";
interface Props {
src: string;
alt: string;
}
const RatioNextImage = ({ src, alt }: Props) => {
const [ratio, setRatio] = useState(16 / 9); // this value can be anything by default, could be 1 if you want a square
return (
<NextImage
src={src}
width={200}
height={200 / ratio}
layout="fixed"
onLoadingComplete={({ naturalWidth, naturalHeight }) => {
setRatio(naturalWidth / naturalHeight);
}}
/>
);
};
export default RatioNextImage;
The best solution that I could find that does not require to specify exact width or height.
<Image
layout="responsive"
width="100%"
height="62.5%" // 16:10 aspect ratio
objectFit="cover"
src={src}
/>
I have a laptop with 15.6'' screen and an external monitor with 23'' screen. I have a .vue component with this code:
<template>
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
Hello
</div>
</template>
It shows this when I view it on laptop screen:
the teal color which corresponds to the xl screen size.
The div has the same teal color when I move it to the external monitor.
However the difference between the screen sizes is significant. If both the 15.5'' and 23'' are considered to be xl, how does one achieves better responsiveness?
For instance, I have a navbar with several navbar items. When I view it on the laptop screen, I need to make the padding px-2 small to get them all to fit:
However on the 23'' screen I have space to add more padding/margin, but can't do it because the changes would affect the laptop view as well:
This is the code of the NavbarItem.vue:
<template>
<li class="flex-1 md:flex-none md:mr-3
sm:text-xs md:text-xs lg:text-xs xl:text-xs
border rounded-full">
<a class="inline-block py-2 lg:px-5 xl:px-2
text-white no-underline" href="#">
{{text}}
</a>
</li>
</template>
<script>
export default {
props: ['text']
}
</script>
I tried adding lg:px-5 but it doesn't affect anything, unless I remove xl:px-2. When there's xl:px-2, the lg class is ignored.
xl has a min-width of 1280px. Check breakpoints.
Your 15.6" and 23" both screens falls under minimum of 1280px. I recommend adding additional screen.
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xxl': {'min': '1920px'}, // this is to support your 23". Make sure your 15.6" screen is less than the min px value passed here
},
}
}
Then your class="inline-block py-2 lg:px-5 xl:px-2 xxl:px-4"
Give this a try & keep me posted in the comments below. Cheers!