I am building a portfolio website and trying to get three images to line up next to each other. I used a classname of d-inline-block(bootstrap) and they don't appear next to each other but one by one down the page.
<div className="d-inline-block g-card">
<img className="g-card-image" src={props.item.imgSrc} alt={props.item.imgSrc} onClick={()=>props.click(props.item)}/>
{props.item.selected && <CardInfo title={props.item.title} subTitle={props.item.subTitle} link={props.item.link} />}
</div>
Here is my css:
.g-card{
margin: 20px
}
.g-card-image{
border-radius:10px;
width:300px;
height:480px;
box-shadow:0px 0px 3px 1px #ccc;
}
.gcard-info{
margin-top:10px;
min-height:100px;
}
g-card-title{
font-size:24px;
margin:0px;
}
.g-card-sub-title{
font-size:16px;
margin:0px;
}
I tried using bootstrap flex but that didn't work.
Related
I need to be able to use #emotion/styled CSS-in-JS library so I can pass props to the background-color and color properties of my Button component. The background-color and color of the buttons are supposed to change with the rest of the app.
The commented out section that starts the JS section:
import EmotionStyled from "https://cdn.skypack.dev/#emotion/styled#11.10.5";
import styled from "https://cdn.skypack.dev/#emotion/styled#11.10.5"
function Button(props) {
const Button = styled.button`
margin-top: 2rem;
background-color: ${props.colorChange};
color: white;
border: none;
height: 2.5rem;
border-radius: 4px;
padding: 0 1rem;
font-size: 1rem;
&:nth-of-type(1) {
margin-right: 0.5rem;
}
&:hover {
background-color: ${props.colorChange};
opacity: 0.9;
}
`
return (
<div className='buttons'>
<div className='left'>
<Button><a href='https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=%22Everything%20has%20beauty%2C%20but%20not%20everyone%20can%20see.%22%20Confucius' id='tweet-quote'
target='_blank'
rel='noreferrer'><i className="fa-brands fa-twitter"></i></a></Button>
<Button><a href='https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dquote%26tags%3Dquotes%252Cfreecodecamp%26caption%3DConfucius%26content%3DEverything%2Bhas%2Bbeauty%252C%2Bbut%2Bnot%2Beveryone%2Bcan%2Bsee.%26canonicalUrl%3Dhttps%253A%252F%252Fwww.tumblr.com%252Fbuttons%26shareSource%3Dtumblr_share_button' id='tumblr-quote'
target='_blank'
rel='noreferrer'><i className="fa-brands fa-tumblr"></i></a></Button>
</div>
<Button id='new-quote'
onClick={props.handleChange}
>New quote</Button>
</div>
)
}
is supposed to replace the Button component I have in place at the moment. Whenever I use this emotion-styled Button component, everything goes blank. Please help!
Here is a link to the codepen project: https://codepen.io/lawlessIndi/pen/gOKjNMG.
I have NavBar.jsx:
import React from "react";
import { Link } from "react-router-dom";
import "./navBar.sass";
function NavBar() {
return (
<div className="NavBar_container">
<nav className="NavBar">
<Link
to="/CreateReview"
className={(isActive) =>
"selected" + (!isActive ? " unselected" : "")
}
>
<div className="NavBar_img">
<img src="./create_review_icon.png" alt="create_review" />
</div>
<p className="NavBar_title">Create Review</p>
</Link>
<Link to="/Hotels" className="NavBar_item">
<div className="NavBar_img">
<img src="./main_page_icon.png" alt="main_page" />
</div>
<p className="NavBar_title">Reviews</p>
</Link>
<Link to="/MyAccount" className="NavBar_item">
<div className="NavBar_img">
<img src="./my_account_icon.png" alt="my_account" />
</div>
<p className="NavBar_title">My account</p>
</Link>
</nav>
;
</div>
);
}
export default NavBar;
And some styles:
.NavBar
position: fixed
z-index: 9999
display: flex
justify-content: space-between
width: 400px
height: 75px
padding: 15px 25px 0 25px
background-color: rgba(0, 0, 0, 0.81)
border-bottom-left-radius: 30px
border-bottom-right-radius: 30px
&_container
width: 450px
margin: 0 auto
&_item
text-decoration: none
&:hover , &:active
.NavBar_title
transition: 0.2s all
color: #DAAD86
border-bottom: 1px solid #DAAD86
.NavBar_img
transition: 0.2s all
transform: scale(1.1)
&_img
width: 35px
margin: 0 auto
&_title
text-align: center
color: white
padding-bottom: 5px
.selected
background-color: blue
.unselected
background-color: red
I'm trying to set up my NavBar so that the selected link changes style, nothing works right now, what's wrong? I would like the text under the image to change its color and become underlined (as it is done in the :hover classes). I did this according to the React-Router documentation, maybe I missed something?
In your app.jsx file, or wherever you have your navbar component rendering, use the useLocation hook provided by 'react-router-dom' to get the current page. You can then pass it to your navbar as props and give the links the 'selected' class if the current page === the page the link points to.
I have a dynamic page with a lot of text in RTL format. TinyMCE cannot display the RTL text properly.
It shows up something like this:
While I want it to be displayed like this:
Searching for a solution, I found out that dangerouslySetInnerHtml will help me get the text clean, however, I cannot get my desired formatting for the dynamic text.
The code is as follows:
const getWelcomeText = () => {
return(
<div>
{texts.map((data, index) => (
<div className='backgroundnawishta'>
<p className='title'>
{data.title}
</p>
<p className='para' dangerouslySetInnerHTML={{__html: data.body}} />
</div>
))}
</div>
)
}
and the css styling.
.para{
font-size: clamp('1.5rem, 2vw, 5rem !important') ;
line-height: clamp('2rem, 4vw, 5rem !important') ;
font-family: titr !important;
text-align: center !important;
direction: rtl !important;
color: #112D4E;
padding: 0 !important;
margin: 0 !important;
text-shadow: 2px 2px #ffffff !important;
}
Is there a way for me to get clean text without using dangerouslySetInnerHTML or Can I override TinyMCE styling?
I want to design a dynamic nav tabs component. when the card is clicked relevant tab is shown, with the connection arrow and border-color green.
sample code or a suggestion would be much helpful
.
You can use accordion by bootstrap. Use css flexbox to horizontally align the tabs next to each other and bind a javascript method that changes css color properties (arrow, green color) on clicking.
Here is the link - https://getbootstrap.com/docs/4.0/components/collapse/
Here is how you can do :
.js :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => {
const selectBlock = (e) => {
e.target.classList.toggle('selected');
}
return (
<div className="block" onClick={(e) => {selectBlock(e)}}>
<div>Here is the block</div>
<div className="arrow">
<FakeArrow />
</div>
</div>
);
};
const FakeArrow = () => {
return (
<div>
<span className="arrow-down-border" />
<span className="arrow-down" />
</div>
);
};
render(<App />, document.getElementById("root"));
.css :
.block {
position: relative;
width: 150px;
height: 50px;
text-align: center;
border: 2px solid black;
}
.arrow {
display: none;
}
.block.selected {
border: 2px solid #99d32c;
}
.block.selected .arrow {
display: block;
}
/* You need to fake the arrow border with another arrow behind */
.arrow-down-border {
position: absolute;
bottom: -20px;
left: 55px; /* 150px (main block) / 2 -20px (size of the triangle)*/
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #99d32c;
}
.arrow-down{
position: absolute;
bottom: -17px;
left: 58px; /* 150px (main block) / 2 -17px (size of the triangle)*/
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-top: 17px solid #ffffff;
}
Here is the repro on Stackblitz.
Of course this is just an example, you have to set a color for the arrows so my advice would be to do it with constants or props. Same thing for the position and others functionality you can add to the FakeArrow component.
Now, it would be waaaayy easier to manage it with an image if you really need a border (this is the tricky part in your requirement), or a simple arrow without border.
You can take a look at this post, it's the same question actually, i used a slightly different way to do it with css, but the result seems to be the same.
I want to add a Floating Action Button (FAB) on my app. Where I want to adjust its width and height to reduce its size using css. Also the button does not show the edit icon inside the button as expected.
Below are the code that I tried,
Code Sandbox
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './profile/profile.css';
import ProfileInfo from './profile/profile';
ReactDOM.render(
<ProfileInfo />,
document.getElementById('root')
);
profile.js
import React from 'react';
import './profile.css';
import Fab from '#material-ui/core/Fab';
import Icon from '#material-ui/core/Icon';
class ProfileInfo extends React.Component{
render(){
return(
<div className='prof-main-container'>
<div className='prof-items-container'>
<div className='prof-pic-container'><img src="https://ik.imagekit.io/upgrad1/upgradlogo.png" className="prof-pic" alt="profile pic" /></div>
<div className='prof-info-data-container'>
<div className='user-name'>User Name</div>
<div className='posts-follows-container'>
{/* <span className='posts-follows-item-first'>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span className='posts-follows-item'>Followed By:6</span> */}
<span>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span>Followed By:6</span>
</div>
<div className='full-name-container'>
<div className='full-name'>UpGrad Education</div>
<div className='full-name-edit-btn'>
{/* <Button variant="fab" color="secondary" size='medium'>
Edit
</Button> */}
<Fab color="secondary" aria-label="Edit" className='edit-btn'>
<Icon>edit_icon</Icon>
</Fab>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default ProfileInfo
profile.css
.prof-main-container {
display: flex;
background-color: #5995DA; /* Blue */
padding: 20px 0;
}
.prof-items-container {
border: 1px solid #fff;
width: 100%;
display: flex;
/* justify-content: space-around; */
padding: 0% 20%;
/* padding-left: 500px; */
}
.prof-info-data-container{
display: flex;
/* justify-content: space-between; */
flex-direction: column;
margin: 0px 40px;
}
.prof-pic-container{
padding: 15px 0px 0px 0px;
}
.prof-pic{
width: 50px;
height: 50px;
}
.posts-follows-item{
margin: 0px 60px;
}
.posts-follows-container{
font-size: 11px;
margin: 2px 0px;
}
.full-name-container{
display: flex;
flex-direction: row;
}
.full-name{
font-size: 12px;
margin: 10px 0px;
}
.user-name{
font-size: 12px;
font-weight: bold;
margin: 5px 0px;
}
.full-name-edit-btn{
margin: 5px 20px;
}
.edit-btn{
width: 20px;
height: 20px;
}
The expected edit icon is as below.
But actually it is rendering as below. Note that, no edit icon is displaying inside the button as expected instead it is showing "EC" inside the button.Please ignore the background color here.
Also, I should be able to adjust the width and height of the below edit button to reduce its size.But I am not able to do it using css. I tried adding a class named "edit-btn" inside profile.css but it does not work.
Did you try using classes prop instead of className on your Fab element.
According to the documentation you should use the former.
Refer this link for the same :
Material UI FAB props
I have updated my answer. Your .edit-btn class will work fine if you give it more specificity. Refer my code sandbox for the same.
Regarding your <Icon> can you help me understand what is edit_icon?
code sandbox
Do give it a try and see if it works. Also please share what you have tried so far.Thanks!