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?
Related
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.
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 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 feel like there would have some default option to apply styling to one prop or the other but I don't see anything in the docs that would allow me to do that.
There's a style prop that I can use, but that applies styles to the entire component. Also the innerDivStyle prop only styles the enclosing wrapper div, not one or the other props/divs of the text itself.
<MenuItem className="foobar" style={{color:'red'}} innerDivStyle={{color:'blue'}} primaryText="My Primary text" secondaryText="My Secondary text" />
This component Renders to this:
<div>
<span class="foobar" tabindex="0" style="border: 10px; box-sizing: border-box; display: block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: 16px; font-weight: inherit; position: relative; color: red; line-height: 48px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; min-height: 48px; white-space: nowrap; background: none;">
<div>
<div style="margin-left: 0px; padding: 0px 16px; position: relative; color: blue;">
<div style="float: right;">My Secondary Text</div>
<div>My Primary Text</div>
</div>
</div>
</span>
</div>
Which doesn't seem to have any way to differentiate the two divs.
Of course I could probably use div:first-child or something but I feel like that would be a workaround to a fundamental problem or something I'm clearly missing.
Material-UI version: 0.16.0
So even though there's no example in the docs that uses this technique, I realized that the primaryText and secondaryText props expect a node object. This is usually just a string in almost every example but it can also be just a straight up element.
This is how you can style a separate prop.
<MenuItem primaryText="My Primary Text"
secondaryText={<span style={{ color: 'blue' }}>My Secondary Text</span>} />
Inline css is not recommended anymore, use isomorphic style-loader to embed css from a separate file.
Check : https://www.npmjs.com/package/isomorphic-style-loader