i m using this CSS to setting my tab's height
.MainPanel .x-tab-bar-strip {
top: 40px !important; /* Default value is 20, we add 20 = 40 */
}
.MainPanel .x-tab-bar .x-tab-bar-body {
height: 43px !important; /* Default value is 23, we add 20 = 43 */
border: 0 !important; /* Overides the border that appears on resizing the grid */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
height: 33px !important; /* Default value 13, we add 20 = 33 */
line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}
The problem is the Icon do not show properly.
Question
I want to change the tabs icon size to 32x32 and align middle.
Try redefining this class :
*.MainPanel .x-tab-icon-el img{
width: 100%; /* did this to center the icons */
height: 100%; /* did this to center the icons */
display: block; /* did this to center the icons */
margin-left: auto; /* did this to center the icons */
margin-right: auto; /* did this to center the icons */
}*
and if needed the rest of the tab content
*.MainPanel .x-tab-inner .x-tab-inner-center{
}*
Related
Hi does anyone have any idea to make the input field behave like this example?
https://www.westpac.com.au/personal-banking/home-loans/calculator/mortgage-calculator/
we should not allow user to delete 0 and when user type should replace 0 with the value, and when we delete all the value, the cursor will always stays at the end of the first digit.
The below code should work the way you want it.
function theFunction(e) {
if (e.value <= 0) return e.value = 0
if (e.value[0] == 0) return e.value = e.value.substring(1)
}
body{
width: 100vw;
height: 100vh;
}
.custom-input {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: rgb(42, 46, 66);
color: rgb(249, 249, 251);
padding: 18px;
font-size: 48px;
height: 84px;
margin-bottom: 18px;
border-color: rgb(171, 175, 177);
}
<body>
<input type="number" class="custom-input" id="custom-input" oninput="theFunction(this)" value="800">
</body>
I think you can use the if condition in your handleChange function, for example :
...
var result = 0;
if(input <= 0 || input == ''){
result = 0;
} else {
result = event.target.value;
}
this.setState({
inputValue: result
})
...
Hope this will help you :)
After hours of work, trying to add a background to my svg i finally did it, but unfortunately if you go to resolution width= 767 and bellow the background image disappear. I really have no idea why is happening.
Here is the code i am using:
const width = 555
const height = 555
const canvas = d3.select(element)
.append('div')
.classed(css.svgContainer, true)
.append('svg')
.attr('preserveAspectRatio', 'xMinYMin meet')
.attr('viewBox', `0 0 ${width} ${height}`)
.attr('xmlns', 'http://www.w3.org/2000/svg')
.classed(css['svg-content-responsive'], true)
for (let i = 1; i < svg.length; i++) {
if (svg[i].type === 'path') {
const id = setItemId(i)
defs.append('svg:pattern')
.attr('id', id)
.attr('width', '275')
.attr('height', '281')
.attr('patternUnits', 'userSpaceOnUse')
.attr('patternTransform', 'matrix(1,0,0,1,0,0) translate(251.5,142.3)')
.append('svg:image')
.attr('xlink:href', imageSrc)
.attr('width', '275')
.attr('height', '281')
.attr('x', 0)
.attr('y', 0)
}
}
// Here is the css which makes the svg responsive
.svgContainer {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
left: 0;
}
In the following situation, I would like to combine variables with the loop index (in SCSS):
Predefined variables
$item-width-1: 400px;
$item-height-1: 340px;
$item-spacing-1: 40px;
$item-width-2: 200px;
$item-height-2: 440px;
$item-spacing-2: 100px;
$item-width-3: 300px;
$item-height-3: 240px;
$item-spacing-3: 60px;
For loop:
#for $i from 2 through 3 {
&:nth-child(#{$i}) {
.image { width: $item-width-#{$i}; height: $item-height-#{$i}; bottom: $item-spacing-#{$i}; }
.content { transform: translate(calc(#{$item-width-#{$i}} + 40px), 0); bottom: $item-spacing-#{$i}; }
.line { height: 108px + $item-spacing-#{$i}; left: $item-width-#{$i} / 2; }
&.active { width: $item-width-#{$i} + ($content-width + 80px); }
}
}
But it shows the following error:
Any ideas on how I could fix this?
Thank you in advance!
I am trying to group rows according to range of numbers like < 50, 50-69,70-100, 100+ but rows are grouped according to value in a cell in each row.
I have a custom filter for the column on which i am enabling rowGroup, I have a cell renderer which renders the cell style according to the value. the cell renderer return a value or html string which is rendered in grid cell. when you enable row group the same cell renderer return the the ranges i.e <50 , 50-69, 70-100, 100+, But group count is not according to these range instead it is grouped on value of the cell.
field Definition:
{
headerName:"PH Index",
field: "botScore",
width: 120,
cellStyle: { textAlign : 'center', padding: '0px 0px' },
cellRenderer: this.scoreRenderer,
filter: "scoreFilter",
enableRowGroup: true,
enablePivot: true,
menuTabs : ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
},`
CellRenderer:
scoreRenderer(params){
let progress;
if(typeof(params.value)== "number"){
progress = Math.round((params.value/150)*100);
if(params.value===0){
return '<div style="font-size: 13px; font-weight: 600; background: #ffffff color: #000000">'+params.value+'</div>';
}
else if(params.value<50 && params.value>0){
return '<div style="font-size: 13px; font-weight: 600; background: linear-gradient(to right, red '+progress+'%, transparent '+progress+'%); color: #000">'+params.value+'</div>';
}
else if(params.value>49 && params.value<70){
return '<div style="font-size: 13px; font-weight: 600; background: linear-gradient(to right, orange '+progress+'%, transparent '+progress+'%); color: '+(progress > 55? "#fff":"#000")+'">'+params.value+'</div>';
}
else if(params.value>69 && params.value<100){
return '<div style="font-size: 13px; font-weight: 600; background: linear-gradient(to right, #53bd9c '+progress+'%, transparent '+progress+'%); color: '+(progress > 55? "#fff":"#000")+'">'+params.value+'</div>';
}
else if(params.value>100){
return '<div style="background: linear-gradient(to right, green '+progress+'%, transparent '+progress+'%); font-size: 13px; font-weight: 600; color: #fff">'+params.value+'</div>';
}
}
else{
let value = parseFloat(params.value);
if(value<50){
return '< 50';
}
else if(value>49 && value<70){
return '50 - 69';
}
else if(value>69 && value<101){
return '70 - 100';
}
else if(value>100)
return '100+';
}
}
AgGridReact component use:
`
<AgGridReact
enableFilter = { true }
enableSorting = { true }
enableColResize = { true }
onGridReady = { this.onGridReady.bind(this) }
onFilterChanged = {this.filterChanged.bind(this)}
frameworkComponents = {this.state.frameworkComponents}
columnDefs = { this.state.columnDefs }
rowData = { this.state.rowDefs }
/>`
Ex.
row1 - value 11
row2 - value 30
row3 - value 55
row4 - value 110
row5 - value 135
So if you group these rows according to range mentioned above you should get this
<50(2),
50-100(1),
100+(2)
but i am getting this output
<50(1)
<50(1)
50-100(1)
100+(1)
100+(1)
I am using html2canvas library to take screenshot of html view.
but background-image failed to load. i am getting error message Error loading background:
here is my JSFiddle.
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
useCORS:true,
logging:true,
allowTaint:true
});
}
#target{
width:300px;
height:160px;
background:lightblue;
color:#fff;
padding:10px;
background-image: url(https://static.pexels.com/photos/20974/pexels-photo.jpg);
background-repeat:no-repeat;
background-position:center center;
-o-background-size: 100%;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 100%;
height: 100%;
}
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */
border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<button onclick="takeScreenShot()">to image</button>
<div id="target">
<p>The border-image property specifies an image to be used as the border around an element:</p>
<p id="borderimg1">Here, the middle sections of the image are repeated to create the border.</p>
<p id="borderimg2">Here, the middle sections of the image are stretched to create the border.</p>
<p>Here is the original image:</p><img src="https://www.w3schools.com/cssref/border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</div>
image for error message
For Internet security reasons, trying to use an image from a different domain in a canvas causes problems. There are two html2canvas options, useCORS and proxy, which are designed to try to get around that problem.
You have to create the proxy in you project and use that into html2canvas proxy option.
Click here to view sample proxy created in different programming languages.
Usage of proxy in html2canvas(c# example)
html2canvas(document.body, {
"logging": true, //Enable log (use Web Console for get Errors and Warings)
"proxy":"html2canvasproxy.ashx",
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
document.body.appendChild(img);
};
img.error = function() {
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
I have same problem.
It's just because of not surpoted problem.
Check this:
http://html2canvas.hertzen.com/features
Unsupported CSS properties
These CSS properties are NOT currently supported
background-blend-mode
border-image
box-decoration-break
box-shadow
filter
font-variant-ligatures
mix-blend-mode
object-fit
repeating-linear-gradient()
writing-mode
zoom
I found out the solution to this. Putting a rectangle as border for each PDF page and also starting the second page, and other pages from a litte down, by making difference in the pageHeight.
You can try it like this:
html2canvas(myCanvas).then(function(canvas) {
var imgWidth = 210;
var pageHeight = 290;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var imgData = encodeURIComponent(pageData);
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
doc.setLineWidth(5);
doc.setDrawColor(255, 255, 255);
doc.rect(0, 0, 210, 295);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
doc.setLineWidth(5);
doc.setDrawColor(255, 255, 255);
doc.rect(0, 0, 210, 295);
heightLeft -= pageHeight;
}
doc.save('file.pdf');
});
Hope this will resolve your issue.