We are doing a YouTube clone for a project and I'm trying to style it. Regardless of what I put for styling it disregards it and nothing is applied.
I have tried adding it on the main div, the link, and it still doesn't work.
import React from "react";
import { Link } from "react-router-dom";
const DisplayVideos = ({videos}) => {
return (
<div >
{videos.map((video, index) => {
// get video id
return (
<div style={{'margin-bottom': '80px'}}>
<Link to={`/video/${video.id.videoId}`}>
<div key={index}>
<img src={video.snippet.thumbnails.medium.url} alt="" />
</div>
<div>
<div >{video.snippet.title}</div>
</div>
</Link>
</div>
);
})}
</div>
);
}
export default DisplayVideos;
styles page:
.display-title{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(29, 50, 67);
}
.display-description{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(0, 0, 0);
}
Link{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* CSS just to show the bounds */
border: 2px solid;
background-color: #eee
}
.text {
width: 20%;
inline-size: 10px;
overflow-wrap: break-word;
}
There is no HTML element called Link so you are not targeting anything when you do Link { instead you would need to do:
.link {
// styles
}
Then do <Link className="link" />
https://reactrouter.com/docs/en/v6/api#link
A <Link> is an element that lets the user navigate to another page by clicking or tapping on it. In react-router-dom, a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to. This means that things like right-clicking a <Link> work as you'd expect. You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).
With react you have to use lowerCamelCase for CSS atributes.
Try marginBottom instead of margin-bottom in your component.
Use className='class1 class2 etc.' if you want to use CSS classes in HTML elements
<div className='class1 class2 etc.'>
Or
<div style={{marginBottom: '80px'}}>
Related
I'm trying to add hover effect to a span element as shown below.
Hover effect doesn't work when added inside
style prop.
But, If it is written in separate css file it will work
I just want to know, Why it is So?
https://codesandbox.io/s/happy-resonance-stqbf9?file=/src/App.js
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<span
style={{
fontSize: "4em",
color: "blue",
"&:hover": {
color: "green"
}
}}
>
Element
</span>
<div></div>
<span className="ele">Element 2</span>
</div>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.ele {
font-size: 4em;
color: blue;
}
.ele:hover {
font-size: 6em;
color: green;
}
You need to use JSS Plugin which supports the psudo-selectors inline style, or you should use Material UI, which also support this plugin.
That because we can't specify the inline styles for pseudo elements and pseudo classes. You can use it with the,
Internal - by using a <style> element in the section.
An internal CSS is defined in the section of an HTML page, within a element.example
External - by using a element to link to an external CSS file
To use an external style sheet, add a link to it in the section of each HTML page.example
Trying to have a wrapping around a that I created in my Navbar as below shows:
<NavBtn>
<Link href="/contact" passHref>
<Button>
Contact Me
</Button>
</Link>
</NavBtn>
Here is my custom Button.js
const StyledButton = styled.button`
height: 45px;
width: 130px;
background: #908db9;
border: none;
border-radius: 4px;
outline: none;
color: #fafafa;
font-size: 1.05rem;
font-weight: 500;
&:hover {
background: #b8b4f0;
}
`
const Button = ({ children }) => {
return <StyledButton><a onClick={() => console.log("clicked")}>{children}</a></StyledButton>
}
Basically, I cannot click the button like I normal behaviour. But I can't resolve where the issue is coming from :(
Please advise as I am a little lost in what I have done wrong. If need more information let me know!
Thanks in advance.
Just wrapped inside Extra Div it will solve the problem.
where are using button component
I am sure this is a simple bug but I´ve been over an hour trying to find where the problem is and definetely could use a different point of view.
In the following function I change the style of two buttons. One of them, responds correctly and indeed its font size changes when the function gets called (deleteBtnToDecorate).
The other one, I cant understand why it doesn´t responds and it´s font size doesn´t get changed (doneBtnToDecorate):
changeStyle: function(idNumber){
const liToDecorate = document.getElementById(`id${idNumber}`)
const doneBtnToDecorate = document.getElementById(`idDone${idNumber}`)
const deleteBtnToDecorate = document.getElementById(`idDelete${idNumber}`)
liToDecorate.style.textDecoration = 'line-through'
doneBtnToDecorate.style.fontSize = '0.8rem'
deleteBtnToDecorate.style.fontSize = '1.1rem'
}
Things I´ve tried:
console logged clicking in both buttons to verify all of them are
targeted correctly. They are
changed css font size manually to verify in case bootstrap might be
the problem (although if it would be, the other button wouldn´t
change either) but anyway...the fact is: It changes succesfully
when i do it via CSS and not the DOM
This is my full code:
<ul class="item-list-ul">
<li
v-for="(i, index) in items"
:id="`id${index}`"
:key="index">{{ i }}
<div class="item-butons">
<b-button :id="`idDone${index}`" class="done-btn" #click="changeStyle(index)" size="sm" variant="outline-dark">Hecho!</b-button>
<b-button :id="`idDelete${index}`" class="delete-btn" #click="deleteItem(i)" size="sm" variant="warning">Borrar</b-button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'TodoList',
methods: {
changeStyle: function(idNumber){
const liToDecorate = document.getElementById(`id${idNumber}`)
const doneBtnToDecorate = document.getElementById(`idDone${idNumber}`)
const deleteBtnToDecorate = document.getElementById(`idDelete${idNumber}`)
liToDecorate.style.textDecoration = 'line-through'
doneBtnToDecorate.style.fontSize = '0.8rem'
deleteBtnToDecorate.style.fontSize = '1.1rem'
}
}
}
</script>
<style lang="css">
.item-wrapper{
padding: 4vh 3vh 4vh 3vh;
}
.item-list-ul{
margin-right: 4vh;
}
.item-list-ul li{
margin-bottom: 3vh;
}
.item-list-ul li{
font-size: 1.4em !important;
font-weight: 600;
list-style: outside none none;
}
.done-btn{
margin-right: 20px;
font-size: 1rem !important;
font-weight: 600 !important;
}
.delete-btn{
font-size: 0.9rem;
font-weight: 600 !important;
}
</style>
Your CSS uses !important:
.done-btn {
...
font-size: 1rem !important;
...
}
If you use !important it will take precedence over inline styles.
Incidentally, this is not really the correct way to do this in Vue. You should apply the changes within the template via either class or style bindings rather than grabbing elements and changing them directly.
I have made some style changes to the Gatsby Link component using styled-components. However for some reason, when i try to apply a padding of 0px, it still leaves a tiny space (few px) above/below the text (between text and top/bottom border). I used gatsby-default-starter in a codesandbox for the initial build.
HTML/CSS Env (codepen.io):
https://codepen.io/marti2221/pen/mNVJWZ
Gatsby Env (codesandbox):
https://codesandbox.io/s/gatsby-paddinglink-spacing-gedtq
I have tried applying padding via styled-components in a Gatsby environment, as well as a normal html/css environment. When padding is set to 0px on the "a" tag in css/html environment, there is no space around the text, as expected. However when i attempt to add the same padding to the gatsby Link component or even a regular a tag, in a gatsby environment, there is a tiny space between the text and my border. This leads to a larger padding on top/bottom for my BtnLink than expected. I could adjust my padding accordingly, but i would like to know the root cause of this issue.
const StyledLink = styled(Link)`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const StyledA = styled.a`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
`
const BtnLink = props => (
<StyledLink {...props}>{props.children}</StyledLink>
)
const IndexPage = () => (
<Layout>
<BtnLink to="page-2">Request Quote</BtnLink>
<StyledA href="page-2">Request Quotes</StyledA>
<Link to="page-2">Link</Link>
</Layout>
)
My desired result is a gatsby Link component that can be styled the same as a regular link element (ie. 0px padding). My result is link text with some spacing around it in the Gatsby environment. When tested with regular HTML/CSS, results are as expected (no spacing when padding is set to 0px)
You've already made a styled(Link) styledComponent, and saved it to the const StyledLink.
const StyledLink = styled(Link)`
display: inline-block;
font-family: sans-serif;
border-radius: 25px;
padding: 0px;
text-decoration: none;
border: 2px solid green;
However, this won't have any affect on a regular gatsby Link component. You still need to render this new StyledLink styledComponent instead of a gatsby Link component if you want to see that styled variation on your page.
const IndexPage = () => (
<Layout>
<BtnLink to="page-2">Request Quote</BtnLink>
<StyledA href="page-2">Request Quotes</StyledA>
<StyledLink to="page-2">Link</StyledLink>
</Layout>
)
Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?
For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>
You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>