Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...
Related
I need to use data-src attribute in < div > to show an image but in react this attribute for me is not working, is there any way to fix that?
<div
data-aos="fade-up"
data-aos-easing="ease-in-out"
data-aos-duration="600"
data-aos-once="true"
>
<a href="#">
<div data-src="../../contents/images/01.jpg">
<div>
//some text here
</div>
</div>
</a>
</div>
When I tested it in simple html it is working and no problem and image shows correctly, but in react it is not Ok...
I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.
The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.
Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.
According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.
I am using React, Redux and Bootstrap setup. I am building book website that have different tabs in that tabs are items(books) that have the same id through the different tabs. All my data is stored in a store and passed down to panel like so: TabsContainer(here I filter the books and pass down via props)->[All, Favorites, ...]->List of Books (all the same for every one) -> Book (all the same).
It is hard to post all the code and also basic concepts since I don't have idea what could be wrong. I instead post the result.
This is where it is ok. I can also fix the bug by resizing the window, but then it bugges the other 4 tabs.
This is clearly a bug. Bugg happens always when I move aways from inital tab.
What could be wrong? Should I set different keys? But if I understand correctly the react would do necessary rendering.
Update Found the root of the evil is the react Equalizer that I used to match column sizes (bootstrap responsive) so that button row appeared on the bot. I believe that has to do with incompatibility with React. So the problem now is how to put button row on the bottom of the panel.
<div className="col-md-12 col-lg-6">
<div className="panel panel-default no-padding">
<div className="panel-body contentRow" style={book_item.mainContainer}>
<Equalizer>
<div className="col-xs-12 col-sm-6" style={book_item.imageContainer}>
<div>
<FavoriteIcon reading={reading} style={book_item.favorites}
onFavoriteChanged={this.onFavoriteChanged}/>
<Link to={"readings/"+reading.id+"/edit"} params={{id: reading.id}} style={book_item.imageLink}>
<img
src={'http://smartbooky.hopto.org/media/images/books/' + reading.book.id + '.jpg'}
height="210px" style={book_item.bookImage}/>
</Link>
</div>
</div>
<div className="col-xs-12 col-sm-6" style={book_item.textContainer}>
<div className="bookTitle">
<strong>{reading.book.title}</strong><br/>
</div>
<div className="bookSubtitle">
{(() => {
if (reading.book.subtitle)
return (<div><em>{reading.book.subtitle}</em> <br/></div>);
})()}
</div>
<div className="bookAuthors">
<div>{authors ? authors : "Unknown author"}<br/></div>
</div>
<div className="bookDescription hidden-xs" style={book_item.bookDescription}>
{truncatedDescription.replace(/<\/?[^>]+(>|$)/g, "")}
</div>
<div className="bookTags hidden-xs row" style={book_item.bookTags}>
{reading.book.genre ? BookCard.renderTags(reading.book.genre) : void(0)}
</div>
<div className="buttonRow"
style={window.innerHeight > 400 ? book_item.buttonRow : void(0)}>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-remove" name="Remove" kind="primary"
handleClick={this.onReadingDelete} style={book_item.buttonRemove} />
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-th-list" name="Shelf" kind="primary"/>
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-edit" name="Edit" kind="primary"/>
</div>
</div>
</div>
</Equalizer>
</div>
</div>
</div>
Creator of react-equalizer here. It is possibly an issue with the equalization happening before the image is loaded. I just published a new verion that fixes this issue (1.0.5).
Here is a working example with react-bootstrap tabs:
http://jsbin.com/mayanakiqo/edit?js,output
class MyComponent extends React.Component {
render() {
let colStyles = {
float: 'left',
width: '50%',
padding: '10px',
background: '#ddd',
border: '4px solid white',
boxSizing: 'border-box'
}
return (
<div>
<Tabs defaultActiveKey={2}>
<Tab eventKey={1} title="Tab 1">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={2} title="Tab 2">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={3} title="Tab 3">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
</Tabs>
</div>
)
}
}
The other option would be to use flexbox to equalize the heights see https://codepen.io/imohkay/pen/gpard for example however it will depend on what browsers you need to support.
I think before answering this there are some things we need to know:
1. Do these Bootstrap tabs implement some sort of non-React JavaScript in terms of switching between them? I know that Bootstrap not only provides CSS files for installation, but it also can provide some JavaScript too to use some of its components.
2. I am guessing that in the pictures you posted, you are navigating from the Favorites Tab, to the All tab? If so, what SHOULD the All tab show? (It is possible that it is actually rendering the intended elements, and it is just the css that is making it look wrong.)
3. If the top two points are not the source of the problem, then we will need to see some code, at least for the render functions of the components involved, as well as what their states look like.
Hi all I am making my first responsive website.
I am doing it mobile first.
In my html I have given some elements which I do not want to be shown on mobile a class of mobile and those I don't want showing class of desktop
This is working brilliantly.
When I get to my tablet / desktop breakpoint and I reverse these to show the desktop menu for example, it is not working.
.desktop {visibility:visible;} .mobile {display:none;}
<div id="topbar">
<!--Mobile Nav-->
<section>
<div class="mobile container">
<div class="col12">
<div class="click">Menu</div>
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
<!--Desktop Nav-->
<section>
<div class="desktop container">
<div class="col12">
<nav id="menu">
<li>home</li>
<li>club information</li>
<li>club kit</li>
<li>membership</li>
<li>event news</li>
<li>calendar</li>
<li>advice</li>
<li>gallery</li>
</nav>
</div>
</div>
</section>
</div>
All you need to do is alternate the .mobile and .desktop classes to be display: block or display: none as and when you need things to be shown/hidden through out your break points.
You're confusing the use of display and visability in your current example
I am building a wizard in angular using the angular-ui bootstrap modal component.
In my main page, I am already using ng-views for navigation.
The goal is to create a modal wizard on one of these pages. As far as I can see,
nested ng-views are not supported. If possible, I would like to keep each step of
the wizard as an external resource.
A terrible way to accomplish this at the moment is something to this effect:
<div id="wizardModal" class="modal hide">
<div class="modal-header">
<div ng-show="isCurrentStep(1)">
<p>Step1 header</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 header</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 header</p>
</div>
</div>
<div class="modal-body">
<div ng-show="isCurrentStep(1)">
<p>Step1 body</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 body</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 body</p>
</div>
</div>
<div class="modal-footer">
<div ng-show="isCurrentStep(1)">
<p>Step1 footer</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 footer</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 footer</p>
</div>
</div>
</div>
Obviously, the above is unacceptable and will create maintenance nightmares.
Is there a clean approach to accomplishing the same effect?
Using ng-include worked like a charm, thanks.
You can find a tutorial about creating a wizard-style app using ng-view and ngRouter here.
I believe this approach is much better since you can have individual controllers per step that inherit the scope from the host form thus keeping all the data but separating the logic.