1482 comments

Hey.. my side bar doesn't show up when it collapses due to small screen size. i cant fix this ! :( btw i', using node-seed
were you able to solve this thing?I am also working with this theme. Can you add me on skype -meenakshi.ss1 . we can collaborate
We are trying to implement socket io with redux for real-time analytics, we have taken reference from here https://github.com/itaylor/redux-socket.io.

1. However in the example above, at client side it is creating a store with socketIoMiddleware which dispatches an action to the server & then at server side, socket io will dispatch the action to the store. But I think in Rubix code store & middleware are already created. Can you please let us know how we can integrate the socket.io implementation with Rubix code?
We are not able to figure out where the store is being created in the Rubix code and how we can adapt it for socket implementation.

2. Also we are looking at implementing the frontend on top of Java API’s instead of the node backend. I believe you already have a beta product for this. Can you please let us know if there are any how-to guides around this or if we can find a detailed documentation on how to integrate the API’s with Rubix framework.
We are currently trying to integrate the theme with meteor using Flow router but the theme assumes only react-router for routing on meteor.Any chance this is being worked on.Thanks
Hi,

im getting this warning when use active property in Sidebar component:
Warning: Unknown prop `active` on <div> tag. Remove this prop from the element.

Use on this way is possible?
<Sidebar sidebar={0} active="false">...
<Sidebar sidebar={1} active="true">...

Or maybe have any way to set the active tab?
I am trying to integrate rubix theme in my already existing project. Now, I think i need css loader and style loader to make it work. I installed it and here's my webpack config. can someone take a look . Iit has started throwing error for react router < .

var webpack = require("webpack");
var path = require("path");

module.exports = {
entry: {
app: './src/app.js'
},
output: {
filename: 'public/build/bundle.js',
sourceMapFilename: 'public/build/bundle.map'
},
devtool: '#source-map',
module: {
loaders: [
{ test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',},

{test: /\.css$/,
use: [ 'style-loader', 'css-loader' ],
query: {
presets: ['stage-0','react','es2015'],
plugins: ["transform-decorators-legacy","transform-class-properties"]
}
}
]
}
};
ok, I changed it to

var webpack = require("webpack");
var path = require("path");

module.exports = {
entry: {
app: './src/app.js'
},
output: {
filename: 'public/build/bundle.js',
sourceMapFilename: 'public/build/bundle.map'
},
devtool: '#source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['stage-0','react','es2015'],
plugins: ["transform-decorators-legacy","transform-class-properties"]
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ],
}
]
}
};
I get this error when i run webpack -w command

ERROR in ./~/@sketchpixy/rubix/lib/Dropdown.js
Module not found: Error: Cannot resolve module 'dom-helpers/activeElement' in /home/ubuntu/workspace/node_modules/@sketchpixy/rubix/lib
@ ./~/@sketchpixy/rubix/lib/Dropdown.js 43:21-57
I checked node version. In one of past comments, You are saying that it hapens with nod version 2. I just checked, I am on node version 4.6.1

Thanks
here are all the dependency errors

https://paste.ofcode.org/XMFiKUb53adGv9mxz6GBYw

should i manually install these missing dependencies or I am doing something else wrong?
ok, i went ahead and manually installed all the dependencies. Looks like no webpack error now. But now i am seeing this error when i run nodemon command

/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60
throw new Error("Element from loaders list should have one of the fields 'loader' or 'loaders'");
^

Error: Element from loaders list should have one of the fields 'loader' or 'loaders'
at getLoadersFromObject (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60:8)
at LoadersList.<anonymous> (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:78:12)
at Array.map (native)
at LoadersList.match (/home/ubuntu/workspace/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:70:19)
at /home/ubuntu/workspace/node_modules/webpack/lib/NormalModuleFactory.js:111:68
at /home/ubuntu/workspace/node_modules/webpack/node_modules/async/lib/async.js:726:13
Ok dependencies error went away. I am still getting error. Do I need file loader in my webpack?
leave it. I am so far off the track now. Not impressed with support
Hi there,

purchased your theme today and I really like it so far!
Would you mind quickly explaining why there are custom versions (@sketchpixy/...) of these packages?

isomorphic-relay-router
react-router-relay
react-router-scroll
redux-fetch-data

I needed to upgrade react-router-relay to 0.13.5 and for this I've removed the custom versions and rebuilt rubix. Did you actually make changes to the packages or will I be fine with the vanilla versions? (It seems to work so far, but you never know, right).

Thanks in advance!
I have difficulty using this theme. Can you please guide me 10 mins?Please!!
Hi,
I'm using react-router-dom (v4) and am trying to use the MainContainer along with the header, sidebar and footer. For some reason, the styles aren't getting applied and it looks like there's a dependency on react-router v3. Is there any way to still use the layout?
rohit, can we collaborate on implementing this theme in our projects?
ankur, sure-- I'll update you as soon as I learn any new info.
add me on skype meenakshi.ss1 . we can collaborate
GioHunt PURCHASED
I'm probably overlooking something obvious. But I can't find the documentation for Rubix Charts. I purchased the template so I could use the Charts -- I don't really want/need the rest of the components. But I can't locate those components or the instructions on how to use them. Can you please help?
hey when I run node run dev -s in node-seed I get some kind of dependency error:

ERROR in ./~/@sketchpixy/rubix/lib/Nav.js
[0] Module not found: Error: Cannot resolve module 'warning' in /Users/dobri/Documents/prog/rubix/node-seed/node_modules/@sketchpixy/rubix/lib
[0] resolve module warning in /Users/dobri/Documents/prog/rubix/node-seed/node_modules/@sketchpixy/rubix/lib
Do you plan to update Relay? I tried it in my package json but it did not work as there was a dependency to the Rubix package.

Kind regards
Ah, and react router 4?

Kind regards
Hello,
i gettting blank array of props at time of first click on sidebar and when fired onEnter event then data will be rendered properly..
Please help me..
i followed todo example as available in theme..my code is as below
import React from 'react';
import ReactDOM from 'react-dom';

import { connect } from 'react-redux';

import actions from '../redux/actions';

import User from '../components/User';

import {
Row,
Col,
Grid,
Panel,
Table,
PanelBody,
PanelHeader,
FormControl,
PanelContainer,
} from '@sketchpixy/rubix';

class DatatableComponent extends React.Component {
componentDidMount() {
$(ReactDOM.findDOMNode(this.example))
.addClass('nowrap')
.dataTable({
responsive: true,
columnDefs: [
{ targets: [-1, -3], className: 'dt-body-right' }
]
});
}
render() {
// console.log(this.props);
// let {users, dispatch} = this.props;
// let {result, errors} = users;
return (
<Table ref={(c) => this.example = c} className='display' cellSpacing='0' width='100%'>
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Phone Number</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Email</th>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th>Phone Number</th>
<th>Actions</th>
</tr>
</tfoot>
<tbody>

</tbody>
</Table>
);
}
}

@connect((state) => state)
export default class AllUser extends React.Component {
static fetchData(store) {
return store.dispatch(actions.getUsers());
}
render() {
console.log(this.props);
return (
<Row>
<Col xs={12}>
<PanelContainer>
<Panel>
<PanelBody>
<Grid>
<Row>
<Col xs={12}>
<DatatableComponent/>
<br/>
</Col>
</Row>
</Grid>
</PanelBody>
</Panel>
</PanelContainer>
</Col>
</Row>
);
}
}
Hi, can some one tell me how to customize the header of rubix, like change the height of it
m5r PURCHASED
Hi,
I'm trying to integrate Auth0 with Rubix but I'm getting the same issue as https://wrapbootstrap.com/theme/rubix-reactjs-powered-admin-template-WB09498FH/comments?page=21#C55297
Could you send the redux-seed with Auth0 my way please ?
Thanks.
What version of react is in use? Are you planning to upgrade to v15.5.0?
Hello,

It's a great theme package. Thank you.

By the way, how to implement ajax data loading on DataTables with Meteor using React?
cyloltd PURCHASED
Has anybody successfully replaced react-router with version 4?
Hi there,

I am working with your awesome project "@sketchpixy/rubix" version :2.9.17" on your redux-seed boilerplate and everything's great!

In another hand, I began to build a new project on this OS boilerplate : https://github.com/react-boilerplate/react-boilerplate and I would like to include Rubix to use your components. I followed your doc: http://rubix-docs.sketchpixy.com/others/custom-integration, BUT when I run "npm start", and after my webpack has been correctly built, I keep having the following error while trying to access to my homePage where I import the Button component from '@sketchpixy/rubix':

Uncaught TypeError: requestFrame is not a function
at eval (eval at ./node_modules/@sketchpixy/rubix/lib/NavDropdown.js (main.js:1571), <anonymous>:62:9)
at Object../node_modules/@sketchpixy/rubix/lib/NavDropdown.js (main.js:1571)
at __webpack_require__ (main.js:687)
at fn (main.js:106)
at eval (eval at ./node_modules/@sketchpixy/rubix/lib/index.js (main.js:1875), <anonymous>:8:21)
at Object../node_modules/@sketchpixy/rubix/lib/index.js (main.js:1875)
at __webpack_require__ (main.js:687)
at fn (main.js:106)
at eval (eval at ./app/app.js (main.js:791), <anonymous>:31:77)
at Object../app/app.js (main.js:791)

I've been working on that issue for 2 days and I still do not find any clues... Maybe someone has encountered the same problem.

Thanks in advance for any ideas!!!

Best regards,
I've got the very same issue. It's an issue with the build. In the build, there's the following code:

if ((0, _isBrowser2.default)()) {
requestFrame = __webpack_require__("./node_modules/request-frame/dist/request-frame.es.js");
rAF = requestFrame('request');
cAF = requestFrame('cancel');
}

The requestFrame returns an __esModule and should reference the "default" property:

rAF = requestFrame.default('request');
cAF = requestFrame('cancel');

This needs to be fixed. A short term solution is to replace the current node_modules/request-frame/dist/request-frame.es.js with node_modules/request-frame/dist/request-frame.js. Since it returns an object, the code will work. However, this is not an appropriate fix.

Please fix this so we can use it!
Thank you tirador_matrix for your input! I did a little short term trick using alias from Webpack:

resolve: {
modules: ['app', 'sass', 'public', 'node_modules'],
alias: {
'request-frame': path.resolve(process.cwd(), 'request-frame-shim.js'),
},
extensions: [
'.js',
'.jsx',
'.react.js',
'.json',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
}

It allows Webpack to say if you find a call for 'request-frame' then call 'request-frame-shim.js' instead.
I created the 'request-frame-shim.js' file at the root of my project where inside I'm calling the 'request-frame' then I'm doing a module.export = requestFrame (i.e: this issue https://github.com/webpack/webpack/issues/706)

// request-frame-shim.js file:
const requestFrame = require('./request-frame-mock');
module.exports = requestFrame;

'request-frame-mock' is just a copy-past of the initial 'request-frame.es.js' file, created at the root of my project too.

Well It works now but for sure I will need to find a "REAL fix" to that.

I thought everything was good but in the tutorial, we need to import the public folder at the root of the project and a file named 'plugins.js' which refers to an import of bower components present in that public folder. I did that and then added all the plugins in the 'plugins file' that I find in the redux-seed project (because for sure I know I will need them for my project). And now when I run "npm start" I have lot of errors like so:

select2.js?23b3:39 Uncaught ReferenceError: jQuery is not defined
at eval (eval at ./public/js/vendor/select2/select2.js (main.js:4266), <anonymous>:40:4)
at Object../public/js/vendor/select2/select2.js (main.js:4266)
at __webpack_require__ (main.js:687)
at fn (main.js:106)
at eval (eval at ./app/app.js (main.js:791), <anonymous>:31:96)
at Object../app/app.js (main.js:791)
at __webpack_require__ (main.js:687)
at fn (main.js:106)
at Object.31 (main.js:4464)
at __webpack_require__ (main.js:687)

I do not understand why some library are undefined while I importing them in 'plugins.js'. Do you have the same issue?

Nota: here is my 'plugins.js' file:

// plugins.js
/* Import your third-Party plugins here */

import 'js/modernizr.js';
import 'js/jquery.js';
import 'js/perfect-scrollbar.js';
import 'js/l20n.js';

import "js/vendor/prism/prism.js";
import "js/vendor/select2/select2.js";
import 'js/vendor/timeline/timeline.js';
import "js/vendor/ion.rangeSlider/ion.rangeSlider.js";

import 'bower_components/d3/d3.js';
import "bower_components/c3/c3.js";
import 'bower_components/Chart.js/Chart.js';
import 'bower_components/gmaps/gmaps.min.js';
import "bower_components/raphael/raphael.min.js";
import "bower_components/morris.js/morris.min.js";
import "bower_components/leaflet/dist/leaflet.js";
import 'bower_components/moment/min/moment.min.js';
import "bower_components/dropzone/dist/dropzone.js";
import "bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js";
import "bower_components/jquery-ui/jquery-ui.min.js";
import 'bower_components/vex/js/vex.combined.min.js';
import "bower_components/codemirror/lib/codemirror.js";
import 'bower_components/trumbowyg/dist/trumbowyg.min.js';
import "bower_components/switchery/dist/switchery.min.js";
import "bower_components/filament-tablesaw/dist/tablesaw.js";
import "bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js";
import "bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js";
import "bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js";
import "bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js";
import "bower_components/messenger/build/js/messenger.min.js";
import "bower_components/jquery-knob/dist/jquery.knob.min.js";
import "bower_components/blueimp-gallery/js/blueimp-gallery.js";
import "bower_components/jquery.steps/build/jquery.steps.min.js";
import "bower_components/codemirror/mode/javascript/javascript.js";
import "bower_components/typeahead.js/dist/typeahead.jquery.min.js";
import "bower_components/jquery-validation/dist/jquery.validate.min.js";
import 'bower_components/kapusta-jquery.sparkline/dist/jquery.sparkline.js';
import "bower_components/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js";
import "bower_components/x-editable/dist/inputs-ext/address/address.js";
import "bower_components/x-editable/dist/inputs-ext/typeaheadjs/typeaheadjs.js";
import 'bower_components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js';
import "bower_components/datatables/media/js/jquery.dataTables.js";
import "js/vendor/fullcalendar/fullcalendar.js";
import "js/vendor/datatables/responsive.js";
import "js/vendor/jcrop/color.js";
import "js/vendor/jcrop/jcrop.js";

import 'js/rubix.js';

Thanks!!
fmigot, you can now use version 2.9.18 as there's a patch for webpack 2.0. You can remove your shim.
Hi,
The documentation doesn't contain how to use various components like TimelineView (from timeline.js).

I am trying to implement a simple timeline using <TimelineView component, but can not understand props to give for the component just by reading node_modules/sketchpixy/rubix/lib/timeline.js

Please provide at least basic examples of using all the components.

Thank you,
Amrutraj Gore
Seriously though. . .
Even though full project would have been perfect, you could have at least included pages that are not in the components like lock page.
Should have downloaded from piratebay to check the ease of use first. :(
Getting this error when trying to use a PanelTabContainer, element still works fine but don't really want the error.

Warning: Unknown prop `activeKey` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in div (created by PanelContainer)
in PanelContainer (created by PanelTabContainer)
in TabContainer (created by Uncontrolled(TabContainer))
in Uncontrolled(TabContainer) (created by PanelTabContainer)
in PanelTabContainer (created by DocumentTabMenu)
in DocumentTabMenu (created by FileViewer)
in div (created by Panel)
in div (created by Panel)
in Panel (created by FileViewer)
in div (created by PanelContainer)
in div (created by PanelContainer)
in PanelContainer (created by FileViewer)
in FileViewer (created by Connect(FileViewer))
in Connect(FileViewer) (created by RouterContext)
in Unknown (created by UserIsAuthenticated(Component))
in UserIsAuthenticated(Component) (created by Connect(UserIsAuthenticated(Component)))
in Connect(UserIsAuthenticated(Component)) (created by RouterContext)
in div (created by Col)
in Col (created by Col)
in Col (created by App)
in div (created by Row)
in Row (created by App)
in div (created by Grid)
in Grid (created by Grid)
in Grid (created by App)
in div (created by App)
in div (created by MainContainer)
in MainContainer (created by App)
in App (created by RouterContext)
in RouterContext (created by FetchData)
in FetchData (created by Connect(FetchData))
in Connect(FetchData) (created by Router)
in Router
in Provider
in WrapperComponent
in AppContainer

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase

$20
5036Purchases

Licenses: Details »

Single application $20
Version:4.1.0
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Categories:
Tags: admin, bootstrap, dashboard, graphql, laravel, meteor, rails, reactjs, redux, relay
Item#:WB09498FH
Released:3 years ago
Updated:1 year ago
Sold exclusively on WrapBootstrap
sketchpixy

sketchpixy

Signed up 3 years ago

Need a front-end theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: