I want to have more properties in ng-style but it won't work.
This is my code line:
<h3 ng-style="{color: titleColor; font-size: titleSize;}">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
If I only have the {color: titleColor} then it works perfectly.
Help me to get the font-size in there aswell
This should work:
<h3 ng-style="{'color': titleColor, 'font-size': titleSize}">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
Related
First, I apologize for not explaining well.
When I create multiple Accordion using mui(each AccordionDetails height are 80vh). How can I see the entire content of that selected Accordion?
Thank you.
I attached a screenshot for better understanding and code.
SOLUTION
I solved this one using useref and scrollIntoView.
import React, {useState} from 'react';
import Accordion from '#mui/material/Accordion';
import AccordionSummary from '#mui/material/AccordionSummary';
import AccordionDetails from '#mui/material/AccordionDetails';
import Typography from '#mui/material/Typography';
import ExpandMoreIcon from '#mui/icons-material/ExpandMore';
export default function Example() {
const [data, setData] = useState([
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
{name:"hello",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
])
return (
<div>
{data.map((data) => {
return(
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>{data.name}</Typography>
</AccordionSummary>
<AccordionDetails style={{height:"100vh"}}>
<Typography>
{data.desc}
</Typography>
</AccordionDetails>
</Accordion>
)
})}
</div>
);
}
<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>
I'm currently trying to fetch some data in my Next.js project using the getStaticProps() function and I continue to get this error:
TypeError: Cannot read property 'map' of undefined
My code looks like this:
export const getStaticProps = async () => {
const data = [
{
"id": 1,
"question": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
"answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste magni at magnam placeat. Non, saepe?"
},
{
"id": 2,
"question": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
"answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste magni at magnam placeat. Non, saepe?"
}
]
return {
props: {
questions: data
}
}
}
export default function FAQ({ questions }) {
return (
<div className="p-8 grid bg-blanco" >
<div className="grid place-content-center text-center mt-10 md:mt-0" >
<h1 className="text-2xl text-gun-rose-700 font-bold" >¿Tiene preguntas? Mira aquí</h1>
<h3 className="text-gun-rose-300 mt-4 max-w-2xl" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, suscipit. Aliquid molestias eveniet ullam? Dolores, minus? Perspiciatis neque voluptates iste!</h3>
</div>
{questions.map(q => (
<div className="" key={q.id}>
<h3 className="">{q.question}</h3>
<p className="">{q.answer}</p>
</div>
))}
</div>
)
}
Any guidence will be appreciated, thanks in advance :)
It could be an async issue where questions is not immediately available. Try with a null check at the start of questions.
export default function FAQ({ questions }) {
return (
<div className="p-8 grid bg-blanco" >
<div className="grid place-content-center text-center mt-10 md:mt-0" >
<h1 className="text-2xl text-gun-rose-700 font-bold" >¿Tiene preguntas? Mira aquí</h1>
<h3 className="text-gun-rose-300 mt-4 max-w-2xl" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, suscipit. Aliquid molestias eveniet ullam? Dolores, minus? Perspiciatis neque voluptates iste!</h3>
</div>
{questions && questions.map(q => (
<div className="" key={q.id}>
<h3 className="">{q.question}</h3>
<p className="">{q.answer}</p>
</div>
))}
</div>
)
}
Edit 1:
The getStaticProps method can only be used on the top level component of a page as stated in the caveats
The fix is to move the getStaticProps method to the top level page component. I've demo'ed this in a sandbox as folder structures are so important, link here.
I'm using ExpansionPanel with TransitionComponent property, when I set default value (Collapse) expansion panel is working fine, but if value is another (Fade, Grow and others), collapsed component has same height as expanded
<ExpansionPanel
expanded={expanded === '1'}
onChange={handleChange('1')}
TransitionComponent={Slide}
TransitionProps={{ mountOnEnter: true }}
className={classnames('accordion-item', expanded === '1' && 'selected')}
>
UPD: there is a snippet https://codesandbox.io/s/vigorous-tree-621cz?fontsize=14&hidenavigation=1&theme=dark
There are two aspects needed to get the Slide transition working appropriately.
In order for the height to adjust appropriately you need to specify both mountOnEnter and unmountOnExit in the TransitionProps.
The other aspect to deal with is the timeout prop. Accordion (previously ExpansionPanel) specifies the timeout as "auto", but "auto" is only supported as a timeout value by Collapse so you need to specify a valid timeout for Slide. In my modified version of your sandbox, I'm using the default values for Slide of 225 for enter and 195 for exit.
Here's a working example:
import React, { useState } from "react";
import {
Accordion,
AccordionSummary,
AccordionDetails,
Slide
} from "#material-ui/core/";
const slideProps = {
mountOnEnter: true,
unmountOnExit: true,
timeout: { enter: 225, exit: 195 }
};
export default function App() {
const [expanded, setExpanded] = useState(null);
return (
<>
<Accordion
TransitionComponent={Slide}
TransitionProps={slideProps}
expanded={expanded === "1"}
onChange={() => setExpanded("1")}
>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
First
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
<Accordion
TransitionComponent={Slide}
TransitionProps={slideProps}
expanded={expanded === "2"}
onChange={() => setExpanded("2")}
>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
Second
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
</>
);
}
The HTML structure is as follows. Could you please tell me how to use CSS to select even items of all P elements? Thanks!
<section>
<div class="item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</section>
you just can use this selector:
.item > p:nth-child(even) {
/* some styles here */
}
.item > p:nth-child(odd) {
/* some styles here */
}
this will select all direct child of .item class and apply your odd or even styles to them, if you want to dismis the direct relationship selection, just use .item p:nth-child(even) { ... }
Set background all P element
p {
background-color:red;
}
Set background all item class
.item{
background-color:red;
}
Set background with id that unique. ID is unique. This can set just one element.
#unique {
background-color:red;
}
Does this answer your question?
I have used bootstrap plugin to collapse and expand the <div>s. I am able to do it for individual <div>'s but if i leave one <div> expanded and do a collapseAll(), the expanded <div> only getting collapsed. Please provide me a solution on this
html:
<body ng-controller="MainCtrl">
<div class="panel panel-default" ng-repeat="item in items">
<div class="panel-heading" ng-click="isCollapsed = !isCollapsed">{{item.title}}</div>
<div class="panel-body" collapse="isCollapsed">{{item.content}}</div>
</div>
<div>
<input type="checkbox" id="collapse_all_cards" ng-model="isCollapsed"><label for="collapse_all_cards">Collapse All</label>
</div>
</body>
js:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [{'title':'Item1','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'},
{'title':'Item2','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'},
{'title':'Item3','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu'}
]
});
link: http://plnkr.co/edit/mcnqeLJcTyaAuTI9JHb9
Please see this Plunk
Pretty sure this is the behavour you are after :)
The problem before was that the same "isCollapsed" property on scope was being used for the "collapse all" and the individual collapses so they were tripping each other up.
See the new controller code which has an individual boolean "isCollapsed" property for each item in the collection:
{'title':'Item1','content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus orci sodales, pellentesque urna eu', isCollapsed: true}
If you need any refinements to the code just ask :)