I have a button with a className 'actions'
This button shows the
css styling from '.actions' but not '.actions button' . I expect both to be included.
This syntax here works for every element except the button.
The full code is at: https://github.com/keithmacinnis/for-play-activity-browser
Activity.module.css
.item {
margin: 1rem 0;
}
.image {
width: 100%;
height: 20rem;
overflow: hidden;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.image img {
width: 100%;
object-fit: cover;
}
.content {
text-align: center;
padding: 1rem;
}
.content h3 {
font-size: 1.25rem;
color: #2c292b;
}
.actions {
padding: 1.5rem;
text-align: center;
}
.actions button {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
.actions button:hover,
.actions button:active {
background-color: #ffe2ed;
}
Activity.js
import css from "./Activity.module.css";
import Card from "./Card";
function Activity(props) {
return (
<li className={css.item}>
<Card>
<div className={css.image}>
<img src={props.activity.image} alt={props.activity.title} />
</div>
<div className={css.content}>
<h3>{props.activity.title}</h3>
<address>{props.activity.address}</address>
<p>{props.activity.description}</p>
</div>
<div>
<button className={css.actions}>Join Activity</button>
</div>
</Card>
</li>
);
}
export default Activity;
Again, I'm unsure why my button receives the stylings for padding and text-align, but the eight properties that follow are ignored.
I do not have much experience with creating selector combinations that include an element type and className, but I just did a little experimenting on my own, and it appears that these may be considered sibling selectors (as opposed to one being the child of the other). Also, it seems like the element type may have to come before the className.
It looks like if you write the selectors like one of these two ways, it should work:
button ~ .actions {
*styles*
}
button + .actions {
*styles*
}
You can read more about combinators here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
To use .class selector for a specific element. You need Start with the element name first, then write the period (.) character, followed by the name of the class... like this
Button.actions {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
If that doesn't work. It might be a problem with the browser using your previous css version from the cash and not the updated styling. To solve it use this:
Ctrl + F5 On Mac OS (in Chrome) use: Cmd + Shift + R .
This will force your browser to reload and refresh all the resources related to the website's page.
It was fixed by this change in Activity.js :
new code:
<div className={css.actions}>
<button >Join Activity</button>
</div>
old code:
<div>
<button className={css.actions}>Join Activity</button>
</div>
Related
I'm having a problem where my list for my dropdown menu appears in another location then expected to be at.
This is part of my code. I've tried multiple references, like YouTube, w3school, and etc.
(HTML / JS)
.dropdownButton {
color: #fe4b4b;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-size: 165%;
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
.dropdown {
align-items: center;
}
.list {
position: absolute;
align-items: center;
text-align: center;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
height: auto;
width: 150px;
border-radius: 5px;
background-color: #3a4172;
cursor: pointer;
overflow: hidden;
box-shadow: 2px 0px 10px 5px rgba(0, 0, 0, 0.7);
list-style: none;
}
.newlist {
transform: scaleY(1);
}
.links {
color: #ffffff;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-size: 130%;
background-repeat: no-repeat;
background-color: transparent;
border: none;
border-radius: 5px;
width: 100%;
}
.links:hover {
color: #fefb4b;
border-left: 5px solid #fefb4b;
cursor: pointer;
transform: scale(1.025);
}
<header>
<ul>
<li id="regular">EARN</li>
<li id="regular">PROMOCODES</li>
<li id="regular">WITHDRAW</li>
<li class="dropdown">
<button class="dropdownButton" href="#">MORE ▼</button>
<ul class="list">
<button class="links">REFFERALS</button>
<button class="links">DAILY</button>
</ul>
</li>
<li id="login">SIGN UP</li>
</ul>
<script>
//Dropdown
let click = document.querySelector('.dropdownButton');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
//Dropdown End
</script>
</header>
I don't know how to fix it cause I'm a beginner, any help on fixing it / guidance would be nice! Thanks.
We're going to need more CSS and possibly HTML to see exactly why your code is behaving unexpectedly.
Definitely mimicking the first comment on here though: IDs should be unique to each element. If you want those li elements to have the same styling, use a class:
<li class="regular">
This will apply the same styling to different elements.
However, when an element appears in the top left like that, in my experience, I am using the CSS 'display', 'float', or 'position' properties incorrectly. If you haven't already, look into how the float and display properties function (as well as relative vs absolute positioning).
Check out this codepen.io, where I have it working by adding:
li {
float: left;
}
This allows your list items to exist on the same line properly. My guess is that you are using
li {
display: inline; /* incorrect usage */
}
to get them on the same horizontal axis. This is fine for regular text elements, but will cause "unexpected" behavior with positioning of child elements. For a more detailed explanation, please see this StackOverflow post:
What is the purpose of float:left on an unordered list when creating a horizontal navigation bar?.
Tip for next time: if your local looks very different than what you get if you paste into codepen.io, people will be less inclined to help you.
If this properly answered your question please upvote and mark best answer :)
CSS styles not applying to React heading and paragraph.
Under 1 div, 1 heading and paragraph is getting CSS but other is not
ive tried giving them the same className and Different class names
If I put the heading and paragraph of :
Meet Babish... and Im launching my... with the Stay in loop and Many products the styles is the same like where it is currently situated, but only the Stay in looop and more products.. area is not getting css.
CSS is working for all other things, im adding new styles for the same component
Result:
I want the styles to be as in Meet babish cookware
const Cookware = () => {
return (
<div className="CookwareMainDiv">
<h4 className="CookwareMainDivSubDiv1h41">meet babish cookware</h4>
<p className="CookwareMainDivSubDiv1p1">I’m launching my all-new line of cookware in three phases;<b>starting with everything you need to prep your meals.</b>
<br/><br/> I wanted to create a high quality line of products with a price point palatable for everyday chefs. The basics, simply made better.</p>
<button className="CookwareMainDivSubDiv1b1">VISIT THE AMAZON STORE</button>
<hr/>
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
<p CookwareMainDivSubDiv1p1>More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
</div>
</div>
)
}
export default Cookware
css
/*
Cookware
*/
.CookwareMainDiv
{
width: 80%;
height:500px;
margin: auto;
box-shadow: none;
}
.CookwareMainDivh11,.CookwareMainDivh12
{
font-weight: 100;
text-align: center;
margin-top: 5%;
}
.CookwareMainDivSubDiv1h41
{
text-transform: uppercase;
margin-top: 10%;
font-size:large;
letter-spacing: 3px;
}
.CookwareMainDivSubDiv1p1,.CookwareMainDivSubDiv1p2
{
margin-top: 5%;
word-spacing: 5px;
font-weight: 300;
}
.CookwareMainDivSubDiv1
{
width: 50%;
height: 400px;
margin: auto;
}
.CookwareMainDivSubDiv1b1
{
height: 60px;
width: 300px;
background-color: transparent;
border: 2px solid black;
border-radius: 16px;
letter-spacing: 2px;
margin-left: 20%;
}
.CookwareMainDivSubDiv1h41
{
margin-top: 5%;
margin-bottom: 5%;
}
.CookwareMainDivSubDiv1 input
{
width: 400px;
height: 30px;
border: 2px solid black;
background-color: transparent;
}
.CookwareMainDivSubDiv1b2
{
width: 100px;
height: 50px;
background-color: transparent;
border:2px solid black;
margin-left: 30%;
}
.CookwareisSubmitted input
{
width: 90%;
height: 50px;
text-align: center;
border: 2px solid rgb(203, 207, 211);
}
.CookwareisSubmitted button
{
width: 30%;
height: 50px;
text-align: center;
margin-bottom: 20%;
}
Please add the "className" to both of the tags.
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
<p className="CookwareMainDivSubDiv1p1">More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
Where is your stylesheet vs where you're importing it into? Is the stylesheet global or component specific? Typically, these issues usually mean the CSS file isn't recognizing the element because it wasn't linked properly to the file the element lives in. (Sometimes, I forget that I gave an element an ID rather than a class.)
Some frameworks don't like certain naming conventions. It helps to look up their official standard. Check out this article from FreeCamp. This article talks about adding a stylesheet with Create React App.
GetBEM did an excellent article on naming conventions, too.
This code is working. Delete that extra "</div>" at the end (It might have been a problem if it didn't already cause an error).
You forgot to give the attribute of className to the Stay in loop and its below paragraph. And you are applying to give css styles as it is a class but it's not.
Your code
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
It has to be
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
Similarly in the paragraph section.
I've been relentlessly trying to resize the text of my buttons to fit within the parent div, and have had no success with fitty and other external plug-ins which work inconsistently or not at all.
I'm attempting to make my own simplified version that simply reduces the font-size of my answer_button_1_text element by 1px until it's smaller than the parent answer_button_1 element.
Using clientWidth returns 281 for answer_button_1 and 253 for answer_button_1_text regardless of if the text in the button extends past the boundaries.
How can I get the actual length of the text?
I've attempted to use the canvas.measureText method, but am unfamiliar with using canvases and when I apply a canvas to the entire HTML in this codepen, none of the elements on my screen are visible. I'm sure I'm making a basic mistake, but if anyone could help me find a way to return the actual space that my answer_button_1_text element takes up, I would really appreciate it.
Here is a codepen:
https://codepen.io/TheNomadicAspie/pen/oNWpZrg
Here is my code:
<button id="button" class="button lower-button">
<div id="button_text">Really long button</div>
</button>
<div id="question_text">Test</div>
body {
background-color: gray;
}
.button {
display: block;
position: relative;
height: 20%;
width: 10%;
background-color: black; /*Button Color*/
color: #f5f5f5;
font-family: open_sans;
font-size: 1.5rem;
font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
border-radius: 20px;
text-decoration: none;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.lower-button {
white-space: nowrap;
}
#question_text {
position: absolute;
color: blue;
font-size: 40px;
margin-top: 100px;
}
const question_text = document.getElementById('question_text')
let text_var = button.clientWidth + ' ' + button_text.clientWidth
question_text.innerText = text_var
I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/
If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.
I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,
while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}
I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle).
Here is my button CSS code:
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family: "open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
and here is CSS icon code:
.w8-button.iconize {
padding-right: 50px !important;
background: url(D:/firstPicture.png) no-repeat 115px center;
}
And this is how I call my button in html:
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>
Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)
On a a modern browser that supports addEventListener and the Class List API (shims are available for both on their respective MDN pages to add support for older broswers), you could do this.
CSS
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family:"open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
.w8-button.iconize {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}
HTML
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>
Javascript
document.getElementById("w8-d-blue").addEventListener("click", function (e) {
var target = e.target;
target.classList.toggle("iconize");
target.classList.toggle("iconize2");
}, false);
On jsfiddle
Here is how you can do this in jquery
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
To use jquery you'll have to add this to the head section of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and type the above code afterwards.
Quick solution
var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2;
element.onclick = function(){
if (switch == 0){
element.style.backgroundImage(img1);
switch = 1;
}
else {
element.style.backgroundImage(img2);
switch = 0
}
I think you are unaware of the wonders Jquery can bring you. If so you should really look it up, it makes many things like that much easier.