I'm building a date picker in react.js with MUI DatePicker. The code is almost exactly what their documentation has used.
However, when the component renders, I get two layers of blue color focus outline. One from DatePicker and one from TextField. This causes the DatePicker label to look like it's crossed out. I've struggled to get this working for days now.
I have tried playing with:
InputProps
Style tag
className
But no luck. I'm relatively new to front-end any help is much appreciated.
This is what I get:
This is what I want to achieve: (I have set TextField to focused just for the sake of displaying what I need to achieve here):
Here's my implementation of the DatePicker:
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={localeMap.en}>
<Box m={2}>
<DatePicker
showToolbar={false}
views={["year", "month", "day"]}
openTo="day"
label="Day"
maxDate={new Date()}
value={v}
onChange={setV}
renderInput={(params) => (
<TextField
{...params}
helperText={null}
onKeyDown={onKeyDown}
/>
)}
/>
</Box>
</LocalizationProvider>
<button type="submit" onClick={fetchReports}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font
medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700
focus:outline-none dark:focus:ring-blue-800 border-black">
Get Report
</button>
Finally made it work by overriding --tw-ring-shadow from tailwind base. The answer #ed-lucas has given here worked for me too.
In the index.css added the following to override the default behavior.
input {
--tw-ring-shadow: 0 0 #000 !important;
}
Related
I'm trying to create a simple page footer in React and TailwindCSS where there is an emoji which shows a tooltip on hover. It looks great when the page is in desktop scaling, however when I test mobile scaling, the emoji doesn't stay appended to the end of the text, it is instead placed next to the whole component and reads as if it is in the middle of the text. Please see images below.
Does anyone know how I can essentially 'glue' this <Tooltip> component to the end of the <p> component?
The Tooltip component I am trying to use is from the Flowbite-React module: https://github.com/themesberg/flowbite-react/tree/main/src/lib/components/Tooltip
My code:
export default function Footer() {
return (
<div className="flex justify-center">
<div className="w-4/6">
....
<div className="flex w-full justify-center">
<p className="dark:text-gray-300 text-black mr-1">© Me test test test, 2022 - Built with ❤️ - Powered by</p>
<Tooltip content="Tooltip text">☕</Tooltip>
</div>
</div>
</div>
);
}
Desktop scaling:
Mobile scaling:
Thanks!
I've been unable to figure this out, so to work around it, I have duplicated the code, and reformatted one of the copies to display as I intended. One copy shows when the screen is 'small' or larger, and the newly formatted duplicate will show only on mobile devices.
<div className="w-full justify-center hidden sm:flex">
<p className="dark:text-gray-300 text-black mr-1 flex-0">© Me test test test, 2022 - Built with ❤️ - Powered by</p>
<Tooltip content="Tooltip text">☕</Tooltip>
</div>
<div className="w-full justify-center sm:hidden">
<p className="dark:text-gray-300 text-black mr-1 flex-0">© Me test test test, 2022 - Built with ❤️</p>
<div className="flex">
<p className="dark:text-gray-300 text-black mr-1 flex-0">Powered by</p>
<Tooltip content="Tooltip text">☕</Tooltip>
</div>
</div>
Result:
I am working on a simple Pokedex that shows all pokemon, I am displaying all the cards by using a map function on an array of pokemon objects like this:
{pokemons.results.map((el, i) => {
return (
<div key={i} className="lg:w-1/4 md:w-1/2 p-4 w-full">
<Link href={"/"}>
<a className="block relative rounded-lg overflow-hidden hover:cursor-pointer hover:shadow-xl hover:shadow-poke-blue/50 p-4 bg-poke-blue group">
<img
alt="ecommerce"
className="object-cover object-center w-full block"
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${el.url
.replace("https://pokeapi.co/api/v2/pokemon/", "")
.replace("/", "")}.png`}
height="400px"
onError={addDefaultSrc}
/>
<div className="mt-4">
<h2 className="group-hover:underline text-white text-center title-font text-lg font-medium uppercase">
{el.name}
</h2>
</div>
</a>
</Link>
</div>
);
})}
there is an image tag in the div of the card which displays the image of the pokemon like this:
I also added the functionality to search pokemon based on the name. The problem is as soon as the state changes the images don't change immediately which makes sense since the images don't get downloaded instantly. For a few minutes, it shows the image of the previously loaded pokemon image at the same place.
So I need help to show a loader for the time till all the images have loaded. I will use a loader that I already have I need to know how to get the event of all images loaded.
Thanks for reading!
There is an onLoad event on the img tag you should be able to just add a loaded property on each item in the local copy of the data, then just updated the loaded property onLoad and then make a derived loaded variable
const loaded = images().every(img => img.loaded)
Also #Chris G's message about the keys is entirely correct and should be followed, I was just answering the question
I create a dashboard with reactJs and react bootstrap. Due to the different size of the card on my dashboard, it's resulting the gap on my dashboard. This is the screenshot :
I want to fill the gap on my dashboard. According to the bootstrap flex documentation, I used d-flex align-items-stretch to fill the gap. Like this :
<Row>
<Col lg="6" md="6" sm="12" className="d-flex align-items-stretch"> //I placed it on Col
<FrequentUsers />
</Col>
<Col lg="6" md="6" sm="12" className="d-flex align-items-stretch">
//Other content
</Col>
</Row>
Placing the d-flex align-items-stretch on the <Col> tag is the
only way that I found worked in my case. If I place it in <Row> tag
or in <div> tag as a container outside it, it didn't work.
The result is the y-axis stretched well as I expected, but the x-axis suddenly shrink :
So I manage my grid layout to make it wider. The grid layout is still working but it didn't affecting the card, it is only affecting the gap like there is a invisible container in it. So I'm assuming that the grid system at this point is "broken"
I'm guessing that this is because the d-flex. But as I read the documentation, it should've instead make the content fully extended to the side. Please check it on the documentation here
Based on #ChewySalmon's comment. I try to adjusting flex-basis on my card. The reason I do it directly on my card is because as I provided in a code sample in my question above, I stretched my item on a <Col> tag, which is stretch the conten vertically (as my screenshoot shown above). So I need to do it on my card (also because this is the only way that worked in my case), so it stretched horizontally. And it work perfectly. Here is the implementation code :
<Card style={{flexBasis: "100em"}}>
//my content
<Card>
I use 100em because it's the only way besides 100px that worked for me. I hard coded it like that because the value is the same in all card, which is 100em. But I recommend you using props in JSX attribute. Hope that help you who have a same problem with me in the future. Thanks to #ChewySalmon.
Im new to react (and react bootstrap) frontend and im a bit stuck. Is there a way to use a dropdown like this and have the 2 date inputs next to eachother (horizontally) instead of vertically? Orcan i only achieve that by using accordion? It needs to look like a dropdown before you click it.
This is how it looks now. And as you see it isnt quite fancy.
My current code:
return (
<Dropdown>
<Dropdown.Toggle variant="light" style={ buttonStyle } id="dropdown-basic" className="uniform-select" >
{headerTitle}
</Dropdown.Toggle>
<Dropdown.Menu>
<Form.Control
type="date"
name="startTime"
id="startDateId"
onChange={ handleStartDate }
/>
<Form.Control
type="date"
name="enddate"
id="endDateiD"
onChange={ handleEndDate }
/>
</Dropdown.Menu>
</Dropdown>
)
Help would be appreciated!
Well, im quite new too but you can probably change the flexbox properties, from a column to a row, if you havent tried it. just inspect the DOM element, and create a new css style with the classname and experiment with the flex directions, cause as far as i know most of react bootstrap components use flex anyways
I'm new to reactjs and I made a component like this:
<Row>
<Column className="col-8 noPadding">
<Text value={this.props.description} />
</Column>
<Column className="col-4 text-right noPadding">
<Text {...this.props} />
</Column>
</Row>
This works fine for me but if I'm using this component (named Autosuggest) I can't style it. I made a .css file (which works on other components) but it doesn't affect my Autosuggest control:
<AutoSuggest className="marginTop" {...this.props.formControlProps} description="test" value="test" />
CSS:
.marginTop{
margin-top: 3rem;
}
There is no margin for the Autosuggest control. I tried to change the color but it doesn't work too.
Is the only way to style it, if you apply the styles in the component class?
Its solved just added a new property and set the className of the hosting to the properties value. Thanks