I want to give same row line to all the grid without mentioning height. So, I used align-item-stretch but arrow button not adjusting.
How to align the arrows to be on the same height?
Here my code
Here are the image
<div
className="m-2 p-0 shadow-lg rounded-2 pe-auto border border-primary"
style={{ width: "100%", maxWidth: "200px" }}
key={data.key}
>
<a href="/">
<div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
<img
className="mr-1"
style={{ height: 50, width: 50 }}
src={data.img}
alt=""
/>
<div>
<h3 className="wow fadeInUp">{data.name}</h3>
<p className="fs-6 mt-2">{data.describe}</p>
</div>
</div>
<div className="d-flex justify-content-end">
<img
style={{width: 30,height: 30,objectFit: "contain",borderBottomRightRadius: 8}}
src={require("./components/Images/arrow-right.png")}
alt=""
/>
</div>
</a>
</div>
How to adjust arrow in the end, which I need to understand.
You can achieve this with some minor changes to your HTML markup (not absolutely needed, but it's easier to manipulate them via CSS if you do).
First, change the way your a and the div holding the arrow are rendered, by adding additional classes.
<a href="/" className="myLink"> <!-- add the class myLink -->
<div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
<img
className="mr-1"
style={{ height: 50, width: 50 }}
src={data.img}
alt=""
/>
<div>
<h3 className="wow fadeInUp">{data.name}</h3>
<p className="fs-6 mt-2">{data.describe}</p>
</div>
</div>
<div className="myArrow d-flex justify-content-end"> <!-- add the class myArrow -->
<img
style={{
width: 30,
height: 30,
objectFit: "contain",
borderBottomRightRadius: 8
}}
src={require("./components/Images/arrow-right.png")}
alt=""
/>
</div>
</a>
Then, add this to your CSS:
a.myLink {
position: relative;
display: block;
height: 100%;
}
.myArrow {
position: absolute;
top: 50%;
right: 5px;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 50%;
}
The background colour and border-radius were added to make the arrow button somewhat transparent.
If you don't want the arrows to overlap the text below them, you can increase the width of the content below the arrows (for example, by the arrow width + some pixels, and then add some padding-right to it (again, equal to the arrow width + some pixels).
Related
I'm building a wordpress block using react (in the frontend).
The block will initially fetch a list from a server, then display the list using map.
For each item, it will render a header, like so:
As you can see, you can click a header and the content shows up. This content is build in the same map and they have their max-height and opacity set to 0 to hide them. I'm using those properties instead of just display: none, because I can CSS-transition them and it looks smoother. I had to blur the content, but you get the idea.
However, in some of the content-divs, the buttons are not working. The links-stlyed-as-buttons (the music services on the left) do not behave as links, although they have their href set in the markup. The hover effects do not work either, the cursor does not become the pointy finger and they are not clickable.
A div styled as a play-button has the same issues: in eventListeners I can see the onClick being listened for, but the button is not clickable, has no hover, etc.
One noteable thing is: it's not all list entries behaving this way. And if one list entry with broken buttons is open, and you open another content section with working buttons, the broken buttons will magically start working. If you then close the content section with working buttons, the formerly broken ones are broken again.
Honestly, this feels like my code is haunted.
Please note: because the length and content of the list is not entirely known, I have to use generated IDs and generated getElementByID-queries to interact with the items and can't define states for them (at least I couldn't think of a way to dynamically create states).
React:
//...
//releases is useState([]) of an object with metadata of songs
//comes from a database query, so the columns are known
{releases.map(release => {return(
<div key={release.catalogue_index} style={{marginTop: "8px"}}>
{/*This is the "header", shown in the screenshot*/}
<div className="layout-row" style={{backgroundColor: "#111", padding: "8px", marginTop: "4px", position: "relative"}} onClick={(event) => {
document.getElementById(`${release.catalogue_index}-content`).classList.toggle('open');
}}>
<div stlye={{flexGrow: 1}} className="layout-stack">
{/* here the title and some information is displayed*/}
</div>
</div>
{/*The content you can show (second screenshot)*/}
<div className="release-content" id={`${release.catalogue_index}-content`}>
{/*layout-stack and layout-row are just flex containers with different directions*/}
<div className="layout-row">
<img loading="lazy" alt={`${release.title} cover`} src={/*cover.jpg*/}
className="release-cover" />
<div className="layout-stack">
<div>{/*some metadata*/}</div>
<hr />
{release.short_description}
<div style={{height: "16px"}} />
<div className="layout-row">
{/*those are the link buttons sometimes not working*/}
{/*the whole thing only gets displayed if any link got fetched from the database*/}
{(release.link_bandcamp || release.link_youtube || release.link_spotify || release.link_apple) ?
<div className="layout-row">
<p className="link-caret"><strong>></strong></p>
<ul className="is-content-justification-center is-layout-flex wp-container-9 wp-block-social-links has-icon-color has-icon-background-color featured-social-group" style={{margin: 0}}>
{release.link_bandcamp ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-bandcamp wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_bandcamp} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Bandcamp</span></a></li>
: null}
{release.link_youtube ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-youtube wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_youtube} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Youtube</span></a></li>
: null}
{release.link_spotify ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-spotify wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_spotify} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Spotify</span></a></li>
: null}
{release.link_apple ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-chain wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_apple} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Apple Music</span></a></li>
: null}
</ul>
</div> : null}
<audio id={`audio-${release.catalogue_index}`} preload="none"
onEnded={() => {document.getElementById(`audio-seek-${release.catalogue_index}`).value = 0}}
onLoadedMetadata={() => document.getElementById(`audio-seek-${release.catalogue_index}`).max = document.getElementById(`audio-${release.catalogue_index}`).duration}
onTimeUpdate={() => document.getElementById(`audio-seek-${release.catalogue_index}`).value = Math.floor(document.getElementById(`audio-${release.catalogue_index}`).currentTime)}>
<source src={/*REDACTED*/} type="audio/mpeg" />
Your browser does not support audio.
</audio>
<div className="layout-row" style={{alignItems: "center"}}>
{/*this is the play button sometimes acting up*/}
<div className="play-pause wp-block-button"
onClick={() => {togglePlayPause(release.catalogue_index)}}>
<img id={`audio-button-${release.catalogue_index}`} className="play-pause svgbutton wp-block-button__link wp-element-button" src={/*play-svg*/} />
</div>
<input type="range" id={`audio-seek-${release.catalogue_index}`} className="audio-seek" max={100} value={0} />
</div>
</div>
</div>
</div>
<div style={{height: "16px"}} />
<div className="layout-stack">
{/*some flavor text*/}
</div>
</div>
</div>
)})}
CSS:
//...
.release-content {
max-height: 0vh;
opacity: 0;
transition: max-height 0.3s;
transition: opacity 0.3s;
}
.release-content.open {
opacity: 1;
height: fit-content;
padding: 16px;
max-height: 100vh;
}
.svgbutton {
color: currentColor;
fill: currentColor;
width: 1em;
height: 1em;
}
div.play-pause {
margin-left: 36px !important;
height: 38px;
}
img.play-pause {
box-sizing: unset !important;
margin-top: 0 !important;
}
//...
The only thing I could think of was that maybe the wordpress-classes ("wp-...") would somehow break ... but that doesn't make much sense, as some of the the list entries work fine while others don't - all using those same classes.
Based on RubenSmn's comment, I had to realize that I did not plan my code well and built terrible anti-patterns.
I have refactored the code to not map into all that markup, but a separate <Release /> component, which in turn contains the markup.
{releases.map(release => {return(
<ReleaseComponent key={release.catalogue_index} release={release} />
)})}
The new component was then built to not use classList.toggle, but proper React states to show and hide the content panels. Also the document.getElementByID-queries are gone and replaced by proper React refs.
const ReleaseComponent = (props) => {
const contentDiv = useRef(null);
const audioElement = useRef(null);
const audioButton = useRef(null);
const audioSeek = useRef(null);
const [contentOpen, setContentOpen] = useState(false);
//...
return(
//...
<div className="release-content" ref={contentDiv} hidden={!contentOpen}>
//...
Turns out, if you do things right, they actually work... This was a pretty humbling experience. Thank you, #RubenSmn .
I'm currenty creating cards with bootstrap 5. I was successfully able to get an image on top, and card body rendering right underneath it. Some of my card title's were longer than others, and I wanted all my card's body to be the same height. I added class 'text-truncate' and was able to truncate long strings of text with ellipsis. I wanted to add a horizontal scroll so that I can just scroll through the long strings rather than have ellipsis on it.
This is my current code for my cards
<div className="row p-5 m-2">
{userShows.map((userShow) => {
return (
<div className="col-sm " key={userShow.show.id}>
<div className="card" style={{ width: 17 + "rem" }}>
<img
src={userShow.show.images[1].url}
alt="podcastimg"
className="card-img-top"
/>
<div className="card-body ">
<h5
style={{ textAlign: "center" }}
className="card-title text-truncate overflow-scroll"
>
<Link
to={`/show/${userShow.show.id}`}
className="stretched-link"
>
<span style={{ fontWeight: "bold", color: "white" }}>
{userShow.show.name}
</span>
</Link>
</h5>
<span className="card-text">
<h6
style={{
textAlign: "center",
fontSize: "14px",
fontWeight: 400,
color: "white",
}}
>
{" "}
{userShow.show.publisher}
</h6>
</span>
</div>
</div>
</div>
);
})}
</div>
When I add both classes 'text-truncate' and 'overflow-scroll' this is how my cards look:
I'm able to scroll, but the full text isn't there.
When I delete class 'text-trucate', the horizontal scroll obviously does not work since the full card-text is being rendered:
I was unable to find any docs on how to make my card body (card-title and card-text) in one line where I can horizontally scroll instead of using class 'text-trucate'
Does anyone know how I can achieve this? Any tips will be greatly appreciated, thanks in advance!
I am trying to create 3 cards in a row but I cant do it. Every card component creates max-width: 1366px and row div. How I can do this?
class CardNew extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="container news-card" style={{ maxWidth: `1366px` }}>
<div class="row row-width" style={{ width: `300px`, height: `438px`, marginTop: `60px`, marginLeft: `200px`}}>
<div class="card-img-top m-fix" style={{ marginLeft: `-10px` }}><img src="https://telgrafs.com/assets/src/article-basketball-little-0.png"></img></div>
<div class="card-text news-category" style={{ paddingBottom: `20px` }}>gündem</div>
<div class="card-title news-ct" style={{ marginLeft: `-60px`, marginTop: `15px` }}>Ücretsiz Maske Nasıl Alınır?</div>
<div class="card-text news-ctext">E-Devlet üzerinden bilgilerinizi girerek ücretsiz maske temin edebilirsiniz. Talepler Sağlık Bakanlığı ile Ulaştırma ve Altyapı Bakanlığı tarafından sizlere ulaştırılacaktır.</div>
<div class="card-img-bottom author-image"><img src="https://telgrafs.com/assets/src/profile-kaa.png"></img></div>
<div class="card-author-name">Kerem Alan</div>
<div class="card-post-time disabled">5 saat önce</div>
<div class="card-text pb-more card-fixed" style={{ color: `#979797`, marginLeft: `` }}>Devamını oku</div>
</div>
</div>
);
}
}
What I want
What I got
the sequence of classes that you're looking for is:
container
row
col-md-XX
card
your-card-contents
relevant HTML:
<div className="container">
<div className="row">
<div className="col-12 col-sm-4">
<div className="card">
</div>
</div>
</div>
</div>
sample stackblitz here
I would use CSS-Grid for the layout, I give you an example below.
Here is a link where you can learn CSS Grid
You should try with Flexbox also
const App = () => (
<div className="container">
<div className="card" />
<div className="card" />
<div className="card" />
</div>
);
ReactDOM.render(
<App />,
document.body
);
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
justify-items: center;
column-gap: 24px;
row-gap: 24px;
max-width: 948px;
margin: 0 auto;
}
.card {
height: 438px;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
When try assign a style to element, I recive the next error.
Error: Objects are not valid as a React child (found: object with keys {border, padding, whiteSpace, textOverflow, overflow, position, float, height, width}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Gridnamic`.
I tried use Object.assign, set the array inline style={{width: "45px"}} and doesnt work.
My array style is:
var styles = {
columns: {
border: "1px solid #ddd",
padding: "5px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow:"hidden",
position: "relative",
float: "left",
height: "45px",
width: "200px"
},
columnSelect: {
border: "1px solid #ddd",
padding: "5px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow:"hidden",
position: "relative",
float: "left",
height: "45px",
width: "50px"
}
};
And my render method is:
return <div>
<p>{this.state.selected.length} seleccionados</p>
<div className="table-responsive">
<div style={styles.row}>
<div style={styles.rowContent}>
<div style={styles.columnSelect}><input type="checkbox" onClick={this.selectElement.bind(this)} className="selectAll"/></div>
{this.state.columns.map(column =>
<div style={styles.columns} key={column.name}>{column.title}</div>
)}
</div>
</div>
<div style={styles.row}>
<div style={styles.rowContent}>
<div> style={styles.columnSelect}</div>
{this.state.columns.map(column =>
<div style={styles.columns} key={column.name}>
<input placeholder="Buscar" className="form-control" ref={'filter-'+column.name} name={column.name} onChange={this.filter.bind(this)} />
</div>
)}
</div>
</div>
</div>
<p>{this.state.rows.length} registros.</p>
</div>;
Thanks developers.
Chill
The issue is here: <div> style={styles.columnSelect}</div>. Probably meant to do <div style={styles.columnSelect}></div> .
Why is there white space to the left and right of my div?
render() {
return (
<div className="container intro-body">
<div className="row">
<h2 className="intro-name center-block">TEXT</h2>
</div>
</div>
)
}
And in my css:
.intro-body {
height: 500px;
background-color: #3BC5C3;
}
I've tried to set body to margin: 0 and padding: 0, thinking it had to do with Bootstrap's default values, but it didn't work. I also don't have a container so why does it still have padding?
The issue is the "container" class - Bootstrap also applies a styling of this - use "container-fluid" to get the full width.
render() {
return (
<div className="container-fluid intro-body">
<div className="row ">
<h2 className="intro-name center-block">TEXT</h2>
</div>
</div>
)
}