Would it be possible for someone to tell me how to put as many folders (icons) and text as possible below each folder in a row.
At the moment the one folders and text are displayed are displayed on each row. I would like to be able to display 5 folders all on the same row.
Thanks.
render() {
return (<div>
{this.state.Folder.map((item, index) => {
return (<div >
<FontAwesome name={"fas fa-folder fa-3x"} />
<h2> {item.FolderName}</h2>
</div>
);
})}
</div>)
In the wrapper div you could add style/class to display grid, then set the column number to be 5.
Here's an example for the class:
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
More details at MDN here.
Related
i have a sidebar that will disappear on a width of 992px and below using the following media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
while mobile nav icon also appear through the following code:
<nav class="mobileNav">
<div class="navLink" href="#">
<div></div>
<div></div>
<div></div>
</div>
</nav>
#media only screen and (max-width: 992px) {
.mobileNav {
display: flex;
}
}
now when i click on this nav , sidebar should appear and disappear, so i made the following state :
const [showSidebar, setShowSidebar] = useState(true);
and modified the following code :
{showSidebar ? (
<div className="sideBar">
<SidebarComponent />
</div>
) : null}
and added onClick function to modify the state :
<nav class="mobileNav" onClick={() => setState(!state)>
...
</nav>
when user clicks on nav element, it indeed changes the state, but sidebar will not appear because of the css media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
so how can i make the state override the media query, or how to solve it in a better way ?
You should aim to use either CSS OR JS for your solution rather than both.
So you can have the sidebar always in the DOM but use CSS to hide/move it off screen and then all the control is in the CSS.
Or you can hide and reveal the sidebar/nav in JS based on screen/window width but this will require you create an event listener so that every time the user adjusts the windows size you check again if you should hide or reveal the sidebar/nav.
Also instead of using your media query on ".sidebar" add an additional class such as "sidebar--active" or similar and then use JS to add/remove the classname as needed and the css to hide or reveal it.
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 am using material-table "https://material-table.com/"
This is my component that renders a table of data. Here, I am using a custom button inside title for adding new data. It is inside title so that the button goes on the top-left side. I am not using the default add option given by material-table because I want to display a separate form page for adding data instead of inline-adding given by material-table. It works perfectly.
The problem is that the default styling of title has overflow:hidden which can be seen by inspecting it.
<div class='MTableToolbar-title-35'> .... </div>
I want this overflow:hidden to be overflow:auto. How can I override the styling of this title?
export const EmployeeView = ({columns,data}) => {
return (
<div>
<MaterialTable
columns={columns}
data={data}
title={
<div>
<IconButton size='small' color='primary' onClick={() => console.log("Add employee")}>
<AddCircleIcon />
</IconButton>
</div>
}
onRowClick={(event,rowData) => console.log(rowData)}
/>
</div>
)
}
Please use this in the css file
.MuiTypography-h6{
font-size: 1rem;
color: red;
overflow:auto
}
I mentioned the color and font size for testing.
I am building my website which displays various lists which are stored as JSON objects.
Initially the list displays all items, then I have a search box with can be used to filter out different items.
I want my list to display as many as 4 json objects per line all the way down to only one object per line. depending on media queries.
I thought by simply resizing my list item divs that it would automatically fit extra divs onto each row until the max width of the container div was used then it would render the next object on the next line etc. however this has not worked and it continues to just display one object below another and won't display more then one object per line.
list layout:
export function Athlete(postDetail){
return(
<div className='Athletes'>
<p>Name: {postDetail.Name}</p>
<p>Town: {postDetail.Town}</p>
<p>State: {postDetail.State} </p>
<p>PostCode: {postDetail.PostCode}</p>
<img src={postDetail.Image} className='photo' alt='athlete photo'/>
</div>
)
}
list layout css:
.Athletes{
width:15%;
height: 15%;
justify-items: center;
align-self: center;
background-color: grey;
border-style:groove;
justify-content: center;
margin-bottom: 20px;
}
list function:
export function AthleteList({athletes}) {
let athl = athletes.map((athlete, i) => {
return <Athlete key = {athlete.ID} {...athlete}/>
});
return <div>{athl}</div>
}
search box function:
export function AthleteSearchBox({value, handleInput}) {
return (
<div>
<input onChange={handleInput} value={value} type ='text' className =
'searchBox'/>
</div>
);
}
originally I had the height and width of .Athletes{} as 55% so that it could only render one image per row as two would take up over 100% of the container div. But now that I want to render more I reduced them to 15% but the outcome is still the same one below the other.
div by default is a block element meaning that sibling divs will stack by default.
If you wish to for them to be in a row, you can do the following:
export function AthleteList({athletes}) {
let athl = athletes.map((athlete, i) => {
return <Athlete key = {athlete.ID} {...athlete}/>
});
return <div style="display: flex; flex-wrap: wrap;">{athl}</div>
}
display: flex; will put all the direct children in a row, while flex-wrap: wrap; wrap will ensure that items are placed in a new row when there is not enough space on a given row.
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.