I have an accordion like the following. The issue I am having is if I click on "Section One", the accordion appears to expand, but in fact it refreshes the page and I cant collapse it. How to allow the accordion to open, but not cause a page refresh? (I would like the accordion to be able to open multiple sections at the same time)
<div class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle-small" data-toggle="collapse" data-parent="#accordianParent" href="#sectionOne" style="border-left: 3px solid red;padding-left:10px;">
Section One
</a>
</div>
<div id="sectionOne" class="accordion-body collapse">
<div class="accordion-inner-small">
Here is all the wonderful stuff in section ONE.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle-small" data-toggle="collapse" data-parent="#accordianParent" href="#sectionTwo">
Section Two
</a>
</div>
<div id="sectionTwo" class="accordion-body collapse">
<div class="accordion-inner-small">
Here is all the wonderful stuff in section TWO.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
You are using the Bootstrap accordion and the href link that is in the accordion is not being intercepted by Angular and hence the full page load.
I suggest you look at UI Bootstrap or Angularstrap for accordion. Or else look at bootstrap docs to find if the behaviour can be supported without href.
Related
I copy and paste the code from "https://react-bootstrap.github.io/components/accordion/" but it does not work ..
<Accordion>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
It looks like maybe the dependent CSS is not properly imported for react-bootstrap components?
According to react-bootstrap document, perhaps try add to App.js:
import 'bootstrap/dist/css/bootstrap.min.css';
I am trying to add the react-bootstrap accordion to my react website. However, when I add it all I see is a white screen on the page that contains the accordion. I've installed react-bootstrap and bootstrap with npm. After refreshing the page I get the error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
import React, {Component} from 'react';
import Accordion from 'react-bootstrap/Accordion'
class Collapsible extends Component{
render() {
return(
<section className="container">
<Accordion>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
</section>
);
}
}
export default Collapsible;
You seem to be using version 4.x (1.6.x) of react-bootstrap, but the components you are using are in version 5.x (2.x) of react-bootstrap.
Version 4 Accordion
Has Accordion, Accordion.Toggle, and Accordion.Collapse components.
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
Version 5 Accordion
Has the Accordion, Item, Header, and Body components.
<Accordion defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
Here's a running codesandbox of your code running in version 2.0.0-beta.6 of react-bootstrap.
I'm new to React.js and I'm trying to make a study project. The problem I have is the following. I have a list of JSON objects (posts) that must be shown, and when clicking the title, the post details appear in a modal window. But independently on the post I click, the modal window always shows me only the first post's details. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>React App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</head>
<body>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/babel">
const postsList = [
{
"id": "5",
"title": "Lorem Ipsum dolor",
"contents": "Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna. Cupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad. Nisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.",
"published": "12.12.1221, 12:10",
"author": {
"nickname": "paladdin"
}
},
{
"id": "3",
"title": "Ex sunt sunt aliqua",
"contents": "Ex sunt sunt aliqua reprehenderit aliqua occaecat. Minim anim commodo officia veniam proident aute cillum eu sunt aute nostrud. Laboris fugiat velit ut pariatur occaecat adipisicing pariatur occaecat. Duis sint enim et consectetur quis pariatur laborum excepteur. Ipsum aliquip qui laborum commodo consectetur do velit veniam occaecat. Ad nisi dolor cillum elit magna dolor voluptate ea. Enim in duis ea consequat sunt Lorem aute.\n\nEst elit sunt quis officia reprehenderit do elit commodo eiusmod esse voluptate. Sit ipsum commodo sint voluptate culpa labore elit magna ullamco nostrud. Laboris magna magna anim labore mollit irure voluptate. Aute non magna aliqua aliqua sunt. Velit mollit consectetur aliqua id tempor ut. Tempor cupidatat aliquip excepteur occaecat incididunt nulla Lorem sint.\n\nNon commodo anim deserunt in et aliquip incididunt ut consectetur sunt esse commodo deserunt et. Tempor fugiat laboris cillum laboris labore. Deserunt quis ad do labore amet culpa officia. Esse et officia nostrud tempor occaecat officia anim incididunt amet sunt excepteur Lorem. Aute occaecat magna velit nisi sit anim consequat velit qui pariatur. Esse incididunt id officia aliqua anim ut et.",
"published": "12.12.1221, 12:05",
"author": {
"nickname": "rebelizer"
}
},
{
"id": "1",
"title": "Hello my new world",
"contents": "Culpa dolor deserunt veniam irure amet officia excepteur labore nisi labore ad labore laborum aute. Ea irure sit exercitation ex. Aliquip dolore duis ullamco labore qui. Et anim irure laborum quis ipsum. Adipisicing culpa est ea velit veniam dolor nisi. Sit cupidatat velit commodo eu.\n\nUt nulla ut irure cillum irure sint sunt cupidatat tempor laboris incididunt elit occaecat fugiat. Reprehenderit enim cupidatat consectetur pariatur ad pariatur consequat veniam do fugiat Lorem laborum do velit. Nulla aute magna magna nisi officia et. Aute adipisicing eu eiusmod tempor exercitation sint non enim laboris dolor adipisicing.\n\nEa do sint pariatur voluptate ad culpa irure. Cillum pariatur deserunt fugiat elit. Exercitation labore amet deserunt magna. Velit veniam aute officia aliqua ipsum veniam pariatur. Aliquip ullamco fugiat officia non sunt ad consequat ipsum est esse commodo reprehenderit. Ad quis consectetur est exercitation fugiat eiusmod. Laborum reprehenderit esse qui irure.",
"published": "12.12.1221, 12:00",
"author": {
"nickname": "rupetra"
}
}
];
class Post extends React.Component {
render() {
const {post} = this.props;
return (
<div className = "card" style={{width: "100%"}}>
<div className = "card-header text-center">
<h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>
</div>
<div className = "card-body text-left">
{post.contents}
</div>
<div className = "card-footer text-right text-muted">
published on {post.published} by <i>{post.author.nickname}</i>
</div>
<div className="modal fade" id="post-details-modal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">{post.title}</h4>
<button type="button" className="close" data-dismiss="modal" aria-label="Close"> x </button>
</div>
<div className="modal-body">{post.contents}</div>
<div className="modal-footer text-muted">created by {post.author.nickname}</div>
</div>
</div>
</div>
</div>
);
}
}
class PostList extends React.Component {
render() {
const {posts} = this.props;
return posts.map((post) =>
<div key= {post.id} className="posts">
<Post post = {post}/>
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<div className="row"></div>
<div className="row">
<div className="col-1 text-right mt-4">
<div>
<i className="fas fa-keyboard fa-3x mb-5"></i>
</div>
<div>
<i className="fas fa-redo-alt fa-3x mb-5"></i>
</div>
</div>
<div className="col-8 posts-zone">
<PostList posts = {postsList}/>
</div>
<div className="col-3"></div>
</div>
<div className="row"></div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
</script>
<div id="root"><div>
</body>
</html>
Solution:
Thanks to Tim Ogilvy, who gave me the rihgt idea, the following solution has been found:
In render() method I created 2 variables:
const dataTargetName = "#post-details-modal-" + post.id;
const postDetailsId = "post-details-modal-" + post.id;
and then:
<h2 data-toggle="modal" data-target={dataTargetName}>{post.title}</h2>
and:
<div className="modal fade" id={postDetailsId}>
You need to use a component with a state of open and closed. Bootstrap and jQuery are not the right solution here. Also you should be using stateless/pure components for most of this. Your issue is in the Post Component.
here you set what it should toggle:
<h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>
and then you set the ID to the same thing for every post in the iterator:
<div className="modal fade" id="post-details-modal">
Try this for example: (the toggle)
<h2
data-toggle="modal"
data-target={`#post-details-modal-${post.id}`}
>
{post.title}
</h2>
the post:
<div className="modal fade" id={`post-details-modal-${post.id}`}>
You should still consider using ReactBootstrap, but this might just get you out of the woods.
The principle: DOM Id's must be unique. You have multiple instances of the same ID so the browser is just going for the first.
My code is something like that:
<apex:page renderAs="pdf" standardController="Account" extensions="CNT_Generar_InfoAbante" sidebar="false" showHeader="false" applyBodyTag="false" >
<head>
<style type="text/css" media="print">
#contenedorBody {
column-count: 2;
column-width: 100px;
column-gap: 20px;
text-align: justify;
width: 100%;
height: 1018px;
max-width: 100%;
max-height: 1018px;
}
.contenedorFooter {
width: 100%;
height: 48px;
max-height 48px;
/* background: rgb(255, 220, 206); */
}
</style>
</head>
<div id="contenedorBody">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="contenedorFooter">
<table>
<tr>
<td class="width70"> </td>
<td class="width30"><apex:image styleclass="imgFooter" width="145" height="46" value="{!$Resource.imgLogo}"/></td>
</tr>
</table>
</div>
But still displaying this
Image Pdf 1
instead like this Image Pdf 2 .
I'm just trying to split my text in two columns, but when I render my page as PDF it looks like the CSS stop working. Could somebody help me? Thank you!
I have implemented lightbox in my responsive site using jquery prettyphoto lightbox and make my inline content to display inside lightbox.How to make the lightbox as responsive
<a href="#inline-1" rel="prettyPhoto" >Prettyphoto lightbox</a>
<div id="inline-1" class="hide">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>