I am using Material UI with Reactjs. I have issues with the Grid List Component. I am trying to have a grid - 1000x1000px so I specified the height and width in the custom gridList style as 1000 and 1000 respectively as in the documentation. There should be 10 columns and each cell should have a height of 100px.
Problem comes when I have more than 1 row in the grid list. There is too big a gap between the row elements. I tried to override the CSS styles but none of them work nicely. I would expect the rows of grid cell to stack right below each other instead of having such a big gap in between.
Click here to see the awkward cell row gap
Here is my code,
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
import {GridList, GridTile} from 'material-ui/GridList';
import { Container } from 'semantic-ui-react';
const styles = {
root: {
"display": 'flex',
"flexWrap": 'wrap',
"justifyContent": 'space-around',
},
gridList: {
"width": 1000,
"height": 1000,
"overflowY": 'auto',
},
indvCell: {
"borderRadius": 25,
}
};
const tilesData = [
{
img: '/img/sample/alex-wong-17993.jpg',
title: 'Breakfast',
author: 'jill111',
},
{
img: '/img/sample/casey-horner-339165.jpg',
title: 'Tasty burger',
author: 'pashminu',
},
{
img: '/img/sample/danny-postma-302063.jpg',
title: 'Camera',
author: 'Danson67',
},
{
img: '/img/sample/derek-thomson-330312.jpg',
title: 'Morning',
author: 'fancycrave1',
},
{
img: '/img/sample/hermansyah-352364.jpg',
title: 'Hats',
author: 'Hans',
},
{
img: '/img/sample/kalen-emsley-99660.jpg',
title: 'Honey',
author: 'fancycravel',
},
{
img: '/img/sample/lachlan-dempsey-397956.jpg',
title: 'Vegetables',
author: 'jill111',
},
{
img: '/img/sample/linas-bam-223729.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
{
img: '/img/sample/michal-kmet-257136.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
{
img: '/img/sample/mohdammed-ali-340700.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
{
img: '/img/sample/ng-55633.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
{
img: '/img/sample/xan-griffin-419096.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
];
class Blocks extends Component {
render() {
return (
<Container>
<div style={styles.root}>
<GridList
cellHeight={100}
style={styles.gridList}
cols={10}
>
{tilesData.map((tile) => (
<GridTile
key={tile.img}
style={styles.indvCell}
>
<img src={tile.img} />
</GridTile>
))}
</GridList>
</div>
</Container>
);
}
}
My Material UI version is "material-ui": "^0.20.0"
The issue in this case is the height defined in the gridList styles, it's forcing the container to stretch the cell containers out. Removing that or setting it to auto fixes the spacing:
const styles = {
root: {
"display": 'flex',
"flexWrap": 'wrap',
"justifyContent": 'space-around',
},
gridList: {
"width": 1000,
"height": 'auto',
"overflowY": 'auto',
},
indvCell: {
"borderRadius": 25,
}
};
Related
I am new to working with iframes in extjs. I am looking to embed content from another page (another URL) into an existing extjs application. Is extjs iframe the correct way to go about it? if so, how do I render the component ? Any suggestions would be helpful for me to try. I was trying the code as below, but I don't see the component being rendered/contents getting embedded.
Ext.define(Ext.panel.Panel,
initComponent: function(){
this.items = [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: some URL,
width: 640,
height: 680,
}
}];
this.callParent(arguments);
}
});
1.You can create a Extjs js class like above and to render this component,you need to create and use it's instance like below code.
Ext.define('Iframe', {
extend: 'Ext.panel.Panel',
xtype: 'sample',
initComponent: function(){
this.items = [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'https://www.sencha.com/',
width: 640,
height: 680,
}
}];
this.callParent(arguments);
}
});
Ext.create({
xtype: 'sample',
renderTo: Ext.getBody()
});
2.You can create an Extjs class like below and use them inside your application.
In my case i have created Extjs class and used it in my application using it's xtype.
Extjs class code:
Ext.define('MyApp.view.main.Iframe', {
extend: "Ext.panel.Panel",
xtype: 'iframe',
title: 'iframe',
initComponent: function() {
var me = this;
me.items = [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'https://www.sencha.com/',
width: 640,
height: 680,
}
}];
this.callParent(arguments);
},
});
Inside my main.js:(main-view)
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
ui: 'navigation',
header: {
layout: {
align: 'stretchmax'
},
title: {
bind: {
text: '{name}'
},
flex: 0
},
iconCls: 'fa-th-list'
},
tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},
items: [{
title: 'Home',
iconCls: 'fa-home',
items: [{
xtype: 'mainlist'
}]
}, {
title: 'Groups',
iconCls: 'fa-users',
items: [{
xtype: 'iframe'
}]
}, {
title: 'Settings',
iconCls: 'fa-cog',
bind: {
html: '{loremIpsum}'
}
}]
});
Same code is working in codesandbox but not taking "Options " when used as component in react.
Options are not getting applied to the graph. Width of bar needs to be changed and canvas needs to be blank.
import React from 'react'
import { Bar } from 'react-chartjs-2';
const data = {
labels: ["80", "20", "30", "40", "35"],
datasets: [
{
label: "",
data: [999, 266, 466, 800, 200],
backgroundColor: "blue"
}
]
};
/* This is part which is not working*/
const options = {
responsive: false,
scales: {
xAxes: [
{
gridLines: {
display: false,
drawBorder: false,
borderDash: [3, 3],
zeroLineColor: "blue"
},
categoryPercentage: 0.4,
barPercentage: 0.3,
ticks: {
beginAtZero: true
}
}
],
yAxes: [
{
display: false,
gridLines: {
display: false,
zeroLineColor: "transparent"
},
ticks: {
beginAtZero: true
}
}
]
}
};
const VerticalBar = () => {
return (
<div className="verticalBar">
/*When I change width and height to 100% it displays very small
version of graph*/
<Bar width="200" height="200" data={data} options={options} />
</div>
)
}
export default VerticalBar
Following is chart I created in codesandbox and it works well in my same environment:
import React from "react";
import ReactDOM from "react-dom";
import { Bar } from "react-chartjs-2";
// import "./styles.css";
function App() {
const data = {
labels: [10, 20, 30, 40, 35],
datasets: [
{
label: "",
data: [999, 266, 466, 800, 200],
backgroundColor: "blue"
}
]
};
const options = {
responsive: false,
scales: {
xAxes: [
{
gridLines: {
display: false,
drawBorder: false,
borderDash: [3, 3],
zeroLineColor: "blue"
},
categoryPercentage: 0.4,
barPercentage: 0.3,
ticks: {
beginAtZero: true
}
}
],
yAxes: [
{
display: false,
gridLines: {
display: false,
zeroLineColor: "transparent"
},
ticks: {
beginAtZero: true
}
}
]
}
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Bar width="306" height="260" data={data} options={options} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I need second image result in my actual code. Hoping to get reply soon.
Its because of the chart-jss version. Second picture which you would like to achieve, were used chart-js 2.8.0 and react-chartjs-2 2.7.6. But in first picture which you're currently using were used chart-js 3.5.0 and react-chartjs-2 3.0.4. So if you insist to use the chart-js same as the second picture, you can downgrade packages with these commands:
npm install chart-js#2.8.0
npm install react-chartjs-2#2.7.6
TailwindCSS 1.2.0
What I'm doing wrong? if I add fontSize as below text-7xl doesn't show up as the new optional value and text-6xl disappear.
module.exports = {
important: true,
theme: {
fontFamily: {
'theme-f1': ['"Oswald"', "sans-serif"],
'theme-f2': ['"Lora"', "serif"],
'theme-f3': ['"Bebas Kai"', "sans-serif"],
'theme-f4': ['"Open Sans"', "sans-serif"],
},
fontSize: {
'7xl': '7rem',
},
extend: {
colors: {
'theme-c1': '#006c32',
'theme-c1-b': '#6c8213',
'theme-c2': '#000000',
'theme-c3': '#ffffff',
}
},
},
variants: {
letterSpacing: ['responsive', 'hover', 'focus'],
},
plugins: [],
}
Currently you are overriding the default font sizes, you have to extend them if you want to add new font sizes without overriding the default ones:
module.exports = {
important: true,
theme: {
fontFamily: {
'theme-f1': ['"Oswald"', "sans-serif"],
'theme-f2': ['"Lora"', "serif"],
'theme-f3': ['"Bebas Kai"', "sans-serif"],
'theme-f4': ['"Open Sans"', "sans-serif"],
},
extend: {
fontSize: {
'7xl': '7rem',
},
colors: {
'theme-c1': '#006c32',
'theme-c1-b': '#6c8213',
'theme-c2': '#000000',
'theme-c3': '#ffffff',
}
},
},
variants: {
letterSpacing: ['responsive', 'hover', 'focus'],
},
plugins: [],
}
Afterwards compile your assets and you should have the default font sizes and your custom font size available.
You can read more about extending the default theme in the docs:
If you'd like to preserve the default values for a theme option but
also add new values, add your extensions under the theme.extend key.
For example, if you wanted to add an extra breakpoint but preserve the
existing ones, you could extend the screens property:
// tailwind.config.js
module.exports = {
theme: {
extend: {
// Adds a new breakpoint in addition to the default breakpoints
screens: {
'2xl': '1440px',
}
}
}
}
I created tabs horizontally, like this:
tab1 tab2 tab3 tab4
But here I want tabs vertically like this:
tab1
tab2
tab3
tab4
I am using this code:
Ext.create('Ext.tab.Panel', {
width: 500,
height: 400,
renderTo: document.body,
items: [
{
title: 'Stock Information' },
{ title: 'Score Analysis'},
{title:'SeverityAnalysis'},
{title:'Historical Analysis'
}]
});
You could use the config options:
tabPosition: 'left',
tabRotation: 0,
titleRotation: 0,
The whole code would then be:
Ext.create('Ext.tab.Panel', {
width: 500,
height: 400,
renderTo: document.body,
tabPosition: 'left',
tabRotation: 0,
titleRotation: 0,
items: [{
title: 'Stock Information'
}, {
title: 'Score Analysis'
}, {
title: 'SeverityAnalysis'
}, {
title: 'Historical Analysis'
}]
});
See example fiddle
I need some help in Sencha Touch because I'm not familiar with it.
I want to arrange two buttons in the center of the page.
My problem is, that the container doesn't stretch in the place between the top- and bottom-toolbar.
Ext.define("AccessibleMap.view.ChooseView", {
extend: "Ext.form.Panel",
alias: "widget.chooseview",
initialize: function () {
console.log("Start");
this.callParent(arguments);
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Accessible Map",
};
var locationButton = {
xtype: "button",
maxWidth: '60%',
minWidth: '50%',
text: "Standort ausgeben",
handler: this.onLocationBtnTap,
scope: this,
margin: '20 5 20 5'
};
var poisButton = {
xtype: "button",
maxWidth: '60%',
minWidth: '50%',
text: "POIs auswählen",
handler: this.onPoiBtnTap,
scope: this,
margin: '20 5 20 5'
};
var buttonCont ={
xtype: 'container',
style:{
background: 'red',
'margin-top':' 14%'
},
layout:{
type: 'vbox',
align: 'center'
},
items:[
locationButton,
poisButton
]
};
//buttons for bottom-toolbar
...
var tabpanel ={
xtype: 'toolbar',
docked: 'bottom',
layout:{
pack:'center',
type: 'hbox'
},
items: [ homeButton, locateButton, optionsButton, infoButton]
};
this.add([ topToolbar, buttonCont, tabpanel ]);
},
//listeners...
});
I colored the container red, thus I can see how big it is.
Making the container fullscreen results in an empty container.
Can somebody help me please?
I found an answer to this problem. I changed the code so that I don't have to call the initialize function. Instead, I put everything in the config settings.
Ext.define("AccessibleMap.view.ChooseView", {
extend: "Ext.form.Panel",
alias: "widget.chooseview",
config:{
layout:{
type: 'vbox',
pack: 'center'
},
items:[{
xtype: "toolbar",
docked: "top",
title: "Accessible Map",
},{
xtype: 'container',
flex: 1,
layout:{
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'button',
...
}],
}],
listeners:[{ ...}]
}
});
As you can see, I defined the layout in the outer Panel to vbox with pack = center and the inner container to align = center. Moreover I defined a flex for the container.