I am working on MERN.io project.
I am using React.js component Dropdown.
But it doesn't contain its style and css and no-stying at all.
...
import Dropdown from 'react-dropdown';
import styles from './../../../../assets/css/style.css';
class OrderCreateWidget extends Component {
...
render() {
...
return(
<div>
<div className={styles["row"]}>
<div className={styles["col-lg-12"]}>
<div className={styles["card"]}>
<div className={styles["card-header"]}>
Place Order
</div>
<div className={styles["card-block"]}>
<h5>*NOTICE* Please make sure that you have "Followers" enabled on your profile so that the share button appears for non-friends too, that will enable us to promote your post.</h5>
<br/>
<div className={styles["row"]}>
<div className={styles["col-lg-7"]}>
<div className={`${styles["row"]} ${styles["form-group"]}`}>
<label className={styles["col-md-3"]}>Service</label>
<Dropdown options={options} onChange={this._onSericeSelect} value='fb_likes1' placeholder="Select an option" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
...
}
this is the screenshot how dropdown works, currently.
I wishes great help from you.
Thank you.
import 'react-dropdown/style.css';
Related
I have strange problem. I'm creating my application where I have a couple of pages. Normally it looks ok:
But this is what happens when I reload the page:
As you can see, I pressed Ctrl + A just to show you that there is a text. Second reload doesn't help. My application is made on VueJS + NuxtJS. Did anyone meet that?
Here is HTML, if it can be useful:
<template>
<div>
<SideBar :subpages='subpages' #clicked="filterByDate" />
<div class='blog-header'>
<div class='search-div'>
<input class='search-field' placeholder='Search...'>
</div>
</div>
<div class='post-content'>
<div v-if='$route.params.id'>
<h1 class='big-text post-title'>{{ post.title }}</h1>
<h1 class='big-text post-title'>{{ post }}</h1>
</div>
<div v-else>
<div v-for='title in categoriesAndPretitles' :key='title.section'>
<div v-if='$route.params.category === title.section'>
<h1 class='big-text post-title'>{{title.title}}</h1>
<p class='description-text'>{{title.text}}</p>
</div>
</div>
<div v-for='p of posts' :key='p.id'>
<div class='post-preview' #click='toPost(p.id, p.type)'>
<div class='post-preview-img'></div>
<div class='post-preview-content'>
<p>{{ p.title }}</p>
<p class='plot'>{{ p.plot }}</p>
<p class='date'>{{ p.created_at }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- <Footer />-->
</div>
</template>
Actually, answer is kinda silly, because it was about styles. I mean, styles wasn't import correctly. For main page I have this style:
body {
margin: 0;
background-color: #181919;
}
And for some reason this style also worked, for which I didn't import file with this style. And after reload it crused, but now, just by importing it work fine :p
I'm trying to use react-burger-menu with bootstrap 3 grids. I want to have a row across the top of my page that has the burger menu in the upper left corner with the remainder of the row containing a page title, so I wrote:
import React from 'react'
import { slide as ReactMenu } from 'react-burger-menu'
export default class Header extends React.Component {
showAbout(event) {
event.preventDefault()
console.log("Version 0.0.1")
}
render() {
return(
<div className="container">
<div className="row">
<div className="col-lg-2">
<ReactMenu>
<a id="View" className="menu-item" href="/">View</a>
<a onClick={ this.showAbout } className="menu-item--small" href="">About</a>
</ReactMenu>
</div>
<div className="col-lg-10 h1">Permit and License Documents</div>
</div>
</div>
)
}
}
But what I get is:
I thought I would use bootstrap grid to layout the horizontal spacing, but it is not working. Is there a way to do this, or should I use something other than bootstrap Grids? TIA.
It looks like that h1 class is applying some property that's overriding the col behavior. It is also possible that you need to add the col class in addition to the col-lg-2 such that <div className='col col-lg-2'
Try:
<div className="container">
<div className="row">
<div className="col col-lg-2">
<ReactMenu>
<a id="View" className="menu-item" href="/">View</a>
<a onClick={ this.showAbout } className="menu-item--small" href="">About</a>
</ReactMenu>
</div>
// change here:
<div className="col col-lg-10">
<h1>Permit and License Documents</h1>
</div>
</div>
</div>
Finally, make sure that you're col size is correct. try making it from md up. Example: <div className='col-md-2'></div>
I am adopting React JS with template I use, http://templines.rocks//html/sokolcov/futurico/index-1.html
I have header that consist of Home and Contact. In my Home, I implemented slider that holds content right below the header. I coded it in my BannerComponent.
import React from 'react';
import bannerJSON from '../../../config/banner.json'
const banners = bannerJSON.banners.map((banner, index)=>{
return (
<div className="home-slide" key= {index}>
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 text-center">
<div className="b-home-slider-content" >
<h2 className="main-heading">
{banner.title}
</h2>
<div className="home-slider-text">
{banner.content}
</div>
</div>
</div>
</div>
</div>
</div>
)
})
class BannerComponent extends React.Component {
render(){
return (
<div className="b-layer-big">
<div className="layer-big-bg page-layer-big-bg">
<div className="layer-content-big">
<div className="b-home-slider-holder wow slideInUp">
<div className="b-home-slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "fade": true, "speed": 1000, "autoplay": true}'>
{banners}
</div>
<div className="b-slick-arrows">
<div className="custom-slideshow-controls">
<span id="home-slider-prev" className="slick-arrows-prev arrow-transparent"><i className="fa fa-angle-left" aria-hidden="true"></i></span>
<span id="home-slider-next" className="slick-arrows-next arrow-transparent"><i className="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
BannerComponent.defaultProps = {
};
export default BannerComponent;
Home.js that actually render the Banner component
import React from 'react';
import Banner from './components/Banner'
import Step from './components/Step'
import Pricing from './components/Pricing'
export default class Homepage extends React.Component {
render(){
return(
<div className="b-page-content with-layer-bg">
<Banner/>
<div className="b-homepage-content">
<div className="b-layer-main">
<div className="page-arrow">
<i className="fa fa-angle-down" aria-hidden="true"></i>
</div>
<Step/>
<Pricing/>
</div>
</div>
</div>
)
}
}
The slider works perfectly when I refresh the page. However, when I change the page content by clicking to Contact and then click back to Home, the content in slider dissapear. In inspect F12, I still able see the content appears in element tab. The content is just invisible on the page and the slider won't slide anymore. I am suspecting that it is React JS stuff that not re-render it.
The slider used by Futirico is some sort of http://kenwheeler.github.io/slick/ if not mistaken.
Slick is a jQuery plugin. It doesn't mix well with React.js. It's likely that React is changing DOM elements that Slick has attached event listeners to. If the event listeners are gone, Slick.js will just stop working.
There are alternative carousel components that are made for React.js. Here's one: https://github.com/akiran/react-slick
I'm very new to meteor/semantic/javascript in general so I apologize if this question seems a little to rushed, but I seriously cannot figure this out.
An example of a click event I am trying to initialize, I have a semantic-ui dropdown menu. With what I have now, I get this error:
=> Meteor server restarted
Errors prevented startup:
While processing files with ecmascript (for target web.browser):
client/main.js:18:4: Unexpected token (18:4)
Your application has errors. Waiting for file change.
Here's what I have, I know it's pretty messy. I'll work on that later.
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import '/main.html';
import '/templates/cards.html';
import '../lib/collections.js';
Template.cards.helpers({
cards: function() {
return Cards.find();
}
});
Template.card.events({
$('.ui.dropdown')
.dropdown()
;
});
<template name="card">
<div class="three wide column">
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">
{{header}}
<div class="ui dropdown right floated">
<i class=" small grey ellipsis vertical icon"></i>
<div class="menu">
<div class="item">Edit</div>
</div>
</div>
</div>
<div class="description">
{{desc}}
</div>
</div>
<div class="extra content">
<button class="ui fluid blue icon button"><i class="map icon"></i></button>
</div>
</div>
</div>
</div>
</template>
You've messed up with Template.card.events, you don't need it at all here.
It should be like this instead:
Template.card.onCreated(function() {
$('.ui.dropdown').dropdown();
});
I am trying to reproduce this cube inside of a webpage I am making using react (i am very new to react, so this question might be stupid)
https://codepen.io/jordizle/pen/haIdo/
So, I created a component, which contains the HTML structure for the cube.
class Cube extends Component {
render() {
return (
<div className="cube">
<div id="wrapper">
<div class="viewport">
<div class="cube">
<div class="side">
<div class="cube-image">1</div>
</div>
<div class="side">
<div class="cube-image">2</div>
</div>
<div class="side">
<div class="cube-image">3</div>
</div>
<div class="side">
<div class="cube-image">4</div>
</div>
<div class="side">
<div class="cube-image">5</div>
</div>
<div class="side">
<div class="cube-image active">6</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
Then, I simply added the CSS from the above website to a separate file, which I imported, like so:
import './ProductPage.css';
(see link above for css. The CSS is just copy pasted).
Finally, I created another component, which should render the cube, when it itself is rendered:
class NewProductPage extends Component {
constructor(props) {
super(props);
this.state = {
img: null,
};
this.onDrop = this.onDrop.bind(this);
}
onDrop(acceptedFiles){
this.setState({
img: acceptedFiles[0].preview,
})
}
render(){
return (
<div>
<Cube />
<div className="DropPicBox">
<DropZone onDrop={this.onDrop}>
{this.state.img ?
<div>
<img className="PicBox" src={this.state.img} />
</div>
: null}
</DropZone>
</div>
</div>
);
}
}
This is rendered, but incorrectly:
My question is: is there something about the way react applies CSS that would change the way the cube looks? I used jfiddle to model this same cube using HTML and CSS from this website: https://codepen.io/jordizle/pen/haIdo/
And the cube looked correctly:
https://jsfiddle.net/jfj3muug/#&togetherjs=q2dv8HIMza
In JSX, to specify the class of an element, you have to use className, not class. E.g.:
<div className="foo">...</div>
instead of
<div class="foo">...</div>
You're doing that in some places, but Cube (your first codeblock) has class in several places.