I've a little problem with my extjs 4.2 MVC app with grid and image transparency:
this is my grid:
Ext.define('XProject.view.message.inbox.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.inboxgrid',
store: 'message.Inbox',
requires: [
'Ext.ux.grid.FiltersFeature' ,
'XMailweb.view.message.inbox.CtxMenu'
],
viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if ((record.get('Flags') & 2 )== 0) {
return "boldFont";
}
if (record.get('Err_Id') != 0) {
return "redFont";
}
}
},
selType: 'checkboxmodel',
selModel: {
checkOnly: false,
injectCheckbox: 0
},
features : [{
ftype: 'filters',
autoReload: false,
encode:true,
paramPrefix : 'Filter'
}],
columns: [{
xtype: 'gridcolumn',
cls: 'attach',
width: 18,
dataIndex: 'Files_Num',
menuDisabled: true,
sortable:false,
text: 'Attachment',
renderer: function(value, metaData, record ){
if (value >= 1){
metaData.css = 'attach';
}
return '';
}
}]
})
other columns are omitted.
My css role is :
.attach {
background:transparent url('../icons/attach.png') no-repeat center left !important;
text-indent: -250px;
}
my attach.png is transparent, but when grid is rendered (with alternate row background color) appear with white background.
This is my transparent image:
And my rendered grid:
Why does not have transparent background (all css images in grid)?
I try with firefox and iexplorer, but result it's the same.
Any ideas?
Background:transparent overide the background color.
Use :
.attach,.attach .x-column-header-over{
background-image:url('../icons/attach.png') !important;
background-position:center left;
background-repeat:no-repeat ;
}
Between :
background:transparent url('../icons/attach.png') no-repeat center left !important;
http://jsfiddle.net/Xpe9V/521/
Related
l have this image above
l am trying to find a solution to make this image clickable for reservation position seat.
simple array :
seats: any=[
{
id:1,
selected:false,
price:50,
},
{
id:2,
selected:false,
price:35,
},
{
id:3,
selected:false,
price:35,
},
{
id:4,
selected:false,
price:35,
},
{
id:5,
selected:false,
price:35,
},
{
id:6,
selected:false,
price:35,
},
{
id:7,
selected:false,
price:35,
},
]
html code :
<div class="main_back">
</div>
css :
.main_back{
background-image: url('../../../assets/seat.jpg');
background-color: #ffffff;
height: 50%;
width: 250px;
background-position: center;
background-repeat: no-repeat;
display: block;
margin: auto;
}
If i use CSS and ngfor i will not get the current position layer for each seat, if the seat is booked or not when hovering on seats like red or green color .
using position absolute or relative .
any solution?
I suggested you the "seats" was .svg (and remove the seats from the image), so we can to have an array of object with almost this properties: x,y,selected and ocupped
seats=[{x:10,y:10,selected:true,ocupped:true},
{x:130,y:10,selected:true,ocupped:false},
....
]
A simple .html like
<div class="car">
<svg
class="seat"
(click)="!seat.ocupped && seat.selected = !seat.selected"
[class.ocupped]="seat.ocupped"
[class.selected]="seat.selected"
*ngFor="let seat of seats"
[style.top.px]="seat.y"
[style.left.px]="seat.x"
>
<!--replace with a beauty seat-->
<rect width="50" height="50" rx="5" ry="5" />
</svg>
</div>
See the property "ocupped" makes "not selectable" the seat
And a .css like
.car{
position:relative;
width:200px;
height:300px;
....
}
.seat{
position:absolute;
fill:silver;
}
.seat:hover:not(.ocupped) {
opacity:.5;
cursor:pointer
}
.seat.selected{
fill: lightsteelblue;
}
.seat.ocupped{
fill: #DA4567;
}
make the trick. See an ugly stackblitz
NOTE:I don't like the path you use in the background. I'm pretty sure that the background should be
background-image: url('assets/seat.jpg');
think that in production (and in develop) the .index.html and the .css is in the folder "dist" and the assets are in the folder "dist/assets"
if you have a set of car images that are not going to change more often and are definite some how, you can rely on seat positions on each images based Image Map elements to make them interactive. example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
basically you need to get coordinates of seats and then you can add any interaction you need to so with seats/
I have this piece of code that displays a tooltip when a user hovers over the question circle icon. The tooltip content can have a maximum character count of 1000. How do I set the overflow-y to scroll by modifying the tooltip in data-toggle mode?
<i class="fa fa-question-circle" data-toggle="tooltip" title="#participant.DeclineReason" data-placement="bottom"></i>
I have the code for the data toggle in the JS script but how do I modify the tooltip properties:
#this.ScriptBlock(#<script>
$(function (){
$('.pie-chart').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('.pie-chart-notparticipating').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getContrastColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145,
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('[data-toggle="tooltip"]').tooltip(); <-------------//this line here
});
Give max-height and height to a class
.tooltip{
max-height:50px;
height:100px;
overflow-y:scroll;
}
Can’t add a comment as I as I don’t have the rep, but a better solution would be to use auto rather than scroll.
.tooltip {
max-height: 80px;
overflow-y: auto; }
auto doesn’t show a scrollbar when the content doesn't need to scroll.
I have a quick question about BootstrapVue carousel:
How can I target the HTML tag inside the b-carousel-slide component to change things like font size and so on?
I know that you can change the HTML tag by using the text-tag prop (see my code example).
Would be great if this one's easy to solve or at least someone points me to the respective section in the documentation.
<template>
<div>
<b-carousel
id="carousel"
:interval="3000"
controls
fade
indicators
background="#ababab"
img-width="1024"
img-height="480"
>
<b-carousel-slide
v-for="item in services"
:key="item.title"
:caption="item.title"
:text="item.description"
text-tag="p"
:img-src="require(`../assets/images/${item.image}`)"
></b-carousel-slide>
</b-carousel>
</div>
</template>
<script>
export default {
name: 'Carousel',
data() {
return {
services: [
{
title: 'Title',
description:
'Text',
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
],
};
},
};
</script>
<style scoped>
p {
color: 'red';
}
</style>
The issue you're facing is trying to target a sub-component inside a scoped style tag.
To do this, you will need to use deep selectors.
Either of these should work.
<style scoped>
/deep/ p {
color: 'red';
}
>>> p {
color: 'red';
}
::v-deep p {
color: 'red';
}
</style>
I'm trying to create a simple Webix form, but there's a problem: when adding a button (regardless or its position - inside the form or out of it), the whole form is squeezed to the button width. Here's my code:
webix.ui({
container:"form",
rows:[
{ view:"form", elements:[
{ view:"text", label:"Name" },
{ view:"text", label:"Email" },
{ view:"text", label:"Password" }
] },
{ view:"button", autowidth:true, value:"Submit" }
]
});
http://webix.com/snippet/89628ea1
Wondering how it can be fixed? Thanks.
You must add the property width in the form.
{
container:"form", width:300,
rows:[
{ view:"form", elements:[
{ view:"text", label:"Name" },
{ view:"text", label:"Email" },
{ view:"text", label:"Password" }
] },
{ view:"button", autowidth:true, value:"Submit" }
]
}
I have converting from html to pdf by using html2canvas and jspdf.
I am using a3 format pdf but content width ix 1000px. so after 1000px, pdf shows black background.
canvas{
background: #fff !important;
background-color: #fff !important
margin: 0;
}
#cisForm {
padding: 10px;
width: 1000px;
margin: 0;
background: #fff !important;
}
cisForm is body
<script type="text/javascript">
window.onload = function() {
html2canvas(document.body).then(function(canvas) {
background:'#fff',
document.getElementById("cisForm").appendChild(canvas);
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
context.fillStyle="#FFFFFF";
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l, "", "");
doc.addImage(canvas.toDataURL("image/jpeg"),"jpeg",0,0)
window.location=doc.output("datauristring")
});
}
</script>
There is no use for this code. This is converting from html to pdf.
and one more question.
Some limited contents only coming in pdf. Some contents are not coming.
Do we need to set no.of pages anywhere?
How to Remove black background from pdf
Try to set your body background-color to #FFFFFF.
This is because of the width you specified.try to adjust the width or specify in html2canvas options.
Check this out this worked for me
https://github.com/Wildhoney/Canvas-Background#canvas-background
import toDataURL from 'canvas-background';
const canvas = document.querySelector('canvas');
const data = toDataURL(canvas, '#ffffff', {
type: 'image/jpeg',
encoderOptions: 1.0
})