have problem with avatar, when I change size (28, 18, 16) - everything is fine.
But when I change size to 24, 22, 20 and other - image is hidden.
Here is my screenshots and code:
Img Component:
import Image from "next/image";
function Img(props) {
return (
<>
<div className={`relative flex h-[${props.size}px] w-[${props.size}px]`}>
<Image
src={
"https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2095&q=80"
}
alt="image"
fill
style={{
objectFit: "cover",
borderRadius: "999px",
}}
/>
</div>
</>
);
}
export { Img };
import { Img } from "../../elements/common/Img";
export default function AvatarPage() {
return (
<>
<div className="flex p-24">
<Img size={14} />
</div>
</>
);
}
Example 1
Example 2
What I do wrong?
Example 3 - if I change size to 38px the image will appear
That is simply not how Tailwind works.
Tailwind just-in-time basically scrapes all of your files (that matches paths in your content from tailwind.config.js) for existing classes and add them to the final distributed CSS. It is totally impossible to create Tailwind dynamic classes via props. You should use style= to add Height.
As a little tip, in the case the possible classes to be generated would be predictable (not [] values, but Tailwind classes), you can make usage of safelist which you can find the documentation here.
Related
Any hint or help would be greatly appreciated!!
In imageList.js, the following {images} is an array.
How can the return of an string "div" of an array return the below image:
return {images}
display this result like if there is a "\n" new line for each record?:
import React from 'react';
const ImageList = props => {
const images = props.images.map((image) => {
return <img src={image.urls.regular} />
});
console.log(props.images)
return <div>{images}</div>;
}
export default ImageList;
result:
for this you are creating img elements and depending on your css they are taking the entire container width. Solving this would require specifying image sizes for example
div{
display: grid;
grid-template-column: repeat(3, 1fr)
}
or
img{
width: 45%;
}
but in the end, it depends on your styling
Your images list is displayed correctly but you miss the css for it.
you can use the GridList or gird system of material ui
or you build your own design.
here is a sample
<GridList cellHeight={160} className={classes.gridList} cols={3}>
{imagess.map((image) => (
<GridListTile key={image.key} cols={image.cols || 1}>
<img src={image.img} alt={image.title} />
</GridListTile>
))} </GridList>
in the link below you can find more usefull information.
I want to make my button and status symbol smaller they are way too big for the screen chat.
Here is my JSX file
import React from 'react';
import closeIcon from '../../icons/closeIcon.png';
import onlineIcon from '../../icons/onlineIcon.png';
import './InfoBar.css';
const InfoBar = ({room}) => (
<div className="infoBar">
<div className="leftInnerContainer">
<img className= "onlineIcon" src={onlineIcon} alt="open 6342 56837 Image" />
<h3>{room}</h3>
</div>
<div className="rightInnerContainer">
<img src={closeIcon} alt="close 6342 56837 Image"/>
</div>
</div>
)
export default InfoBar;
Thank you so much
In the attached image you have defined an inline style like this
<div className="leftInnerContainer" style={{"width:60px"},{"height:30px"}}
You have the right idea, but the syntax for the style prop is wrong - hence the compilation error.
It needs to be a plain Javascript object, for which the correct syntax is this
{ width: "60px", height: "30px" }
And in the style prop in JSX, looks like this
<div className="leftInnerContainer" style={{ width: "60px", height: "30px" }}
You should give the css you are importing too given it can be solved through that.
That aside, just pass with either the css or the style prop a max height and/or width and it should work.
Note: if you set a max width or height you don't need to specify the other, just set it to auto and it will retain the proportion.
If you attach the css i can give you additional help.
You can also pass inline styles
<img className= "onlineIcon" src={onlineIcon} style={{height:"20px",width:"20px"}}alt="open 6342 56837 Image" />
Currently using google-maps-react component in a contact form for a sales page. This code has successfully imported the map and it is viewable in the dimensions 450x350. My issue is, is that despite the image being 450x350 the frame or i guess div that the map api sits in still thinks the map is still default size so it pushes my entire site out with white space that is removed when i remove the Map API. No amount of adding styles as dimensions to anything around the map has fixed this.
What do i pass into the map in order to effect the size of the frame and not just the image itself?
import React, { Fragment } from "react";
import ContactForm from "../contactus/ContactForm";
import { Map, Marker, GoogleApiWrapper } from "google-maps-react";
const ContactUs = props => {
const style = {
maxWidth: "450px",
height: "350px",
overflowX: "hidden",
overflowY: "hidden"
};
return (
<Fragment>
<h2 className='lead text-primary text-center'>Get in touch</h2>
<div className='grid-2'>
<div>
<h4>Priority Consulting</h4>
<ul>
<li>
1234 Sherman Way <br />
Sherman Oaks, CA 90210
</li>
<li>info#priorityconsulting.com</li>
<li>1-800-324-3423</li>
</ul>
<Map google={props.google} style={style} />
</div>
<div>
{" "}
<ContactForm />
</div>
</div>
</Fragment>
);
};
export default GoogleApiWrapper({
apiKey: "MYKEY"
})(ContactUs);
I went back into my code and found an updated version, that made it to a final version of the site. Unfortunately the site is no longer live so cant verify if this is the best answer but, like I said its in my code, so it probably solves.
const style = {
maxWidth: "450px",
height: "350px",
overflowX: "hidden",
overflowY: "hidden"
};
const containerStyle = {
maxWidth: "450px",
height: "350px"
};
<Map google={props.google} style={style} containerStyle={containerStyle} />
I got React noob question.. The thing is that I have a method with a mount of JSX attributies with their respective properties.
The question is, how can I get to the imageUrl attribute a style? such as give border-radius: 10px or centering in the page.
xxxx (item:aaaa, index:bbb) {
return (
<div className="Post ms-u sm3 ms-u-lg3 ms-u-xl">
<div className="content">
<PersonaControl
id={"BlogItem" + index}
identifier={item.blogOwnerEMail}
displayName={item.blogOwnerName}
size={PersonaSize.extraLarge}
hidePersonaDetails={true}
imageUrl={item.blogLeaderPicture && item.blogLeaderPicture}
labels={this.props.labels}
/>
Here is the render method. I try to double the information of the property xxxx how calls me the content of the parameter aaaa:
render() {
return (
<div className="clearBoth"></div>
<div className="bandContent" style={{ backgroundColor: this.props.backgroundColor }}>
{this.state.leadershipBlogDataItems.map(i => {return this.leadershipBlogDataItems(i, this.state.leadershipBlogDataItems.indexOf(i))})}
<div className="blogPost"></div>
You simply have to add a style property. You can do this by adding:
<div style={{ border: "1px" }} > </div>
If you want to add the "classic" css, with a file, simply add a className to the div, and import the css file as shown below.
import "./style.css";
<div className="yourstylename"> </div>
Inside style.css you simply add your css. By the way, the import shown above only works if the css file is in the same folder as your component/js file.
Looking for a way to change the background-image of a jumbotron component
this is what I've tried but no luck:
class Jumbo extends Component {
render() {
var styles ={
"background-image":"http://worldkings.org/Userfiles/Upload/images/Yale.jpg"
}
return (
<div>
<Jumbotron style={styles}>
<h1>Public Art</h1>
<br/>
<p>
A crowd-sourced archive of art in public spaces.
</p>
<Button bsStyle="primary" href="#" >Learn more</Button>
<Button bsStyle="primary" href="#" >Submit a Piece</Button>
{/*link these!*/}
</Jumbotron>
</div>
);
}
}
any pointers?
Apparently you have to use backgroundImage instead of "background-image" for inline styles according to React doc's example:
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
Taken From: https://reactjs.org/docs/dom-elements.html
style
The style attribute accepts a JavaScript object with camelCased
properties rather than a CSS string. This is consistent with the DOM
style JavaScript property, is more efficient, and prevents XSS
security holes.
Found a great solution here. I know this is old but it's the first result that comes up when searching the problem. Future react bootstrappers, enjoy!
First, import your image normally:
import bgimage from '../image_background.png'
Then you can apply the style to your tag like so:
<Jumbotron style={{ backgroundImage: `url(${bgimage})`, backgroundSize: 'cover' }}>