I have added a textareafield to the panel, which by default is white as background. But I wanted to hide the white color and give it the lightblue color, so that it falls in with the panel.As you can see on the image, the top (first line) of the textareafield stays white. Does anyone has an idea of why, and how to solve this?
My code to generate the textareafield is:
xtype: 'textareafield',
readOnly: true,
height: 150,
fieldStyle: 'background-color: #DFE9F6',
value: warning,
id: 'textareaField'
There is still a background image that you will need to remove, too. Please try
xtype: 'textareafield',
readOnly: true,
height: 150,
fieldStyle: 'background-color: #DFE9F6; background-image: none;',
value: warning,
id: 'textareaField'
Related
I have a hard time figuring out how b-table adds the thick border when you click on a b-table row, when the b-table has selectable on.
//someidea component
<template>
<b-table striped hover
:items="ideas"
:fields="ideaFields"
#row-clicked="markRead" //this turns on selectable by default.
ref="table">
</b-table>
</template>
<script>
export default {
name: 'someidea',
data()
{
return {
ideas: [{
title: 'Some idea',
description: 'Some description',
_rowVariant: 'warning',
}],
ideaFields: [
{
key: 'title',
sortable: false,
},
{
key: 'description',
sortable: false,
}
],
}
},
mounted()
{
},
methods: {
markRead(record, data, datax)
{
record._rowVariant = '';
},
},
}
</script>
Before clicking
After clicking
Now when you click on the row, it does empty the _rowVariant, changing it from yellow bg to white bg as expected. The problem that the row gets a thick border for getting focus(dont know if it really is focus but cannot describe it any better). I've checked in the inspector in both chrome and firefox(both recently updated) and I do not see any change in the focussed row, but it does get the border so im not sure how they applied it.
One important sidenote based on b-table documentation(first example table):
b-table supports programmatically selecting and de-selecting the selected row. This does sadly not apply to my situation. The clicked row is not really selected, more like focussed. If you click twice on the row in the documentation(again first table), you see that it becomes deselected but still has the border.
Ive tried this too(without success):
tr:focus {
border: none !important;
}
I hope anyone can help me out with this because even though having an ugly border is not the end of the world, it bugs me I cannot find how this style is being applied.
Thanks in advance.
Solution
Change border to outline like this:
tr:focus {
outline: none;
}
You can also do this:
tr:focus {
outline: 0;
}
The outline property is used by :focus styles by default. The purpose of outline is to make the element stand out. outline is drawn around the border.
The difference between outline & border
Outlines are not a part of the box model.
Outlines do not change the size or position of the element.
Outlines cant set each edge to a different width, or set different
colours and styles for each edge. An outline is the same on all sides
(All sides must be uniform in colour, width and style).
Outlines do not take up space they are placed on top of the element
(outlines do not interfear with the element itself or other elements
around them).
Outlines can not be circular.
I have an Image that is masked by an image asset. I'd like to apply a dashed border to the Image so that the dashed border shape follows the mask whatever it is.
Image(uiImage: self.helper.loadedImage!)
.resizable()
.scaledToFill()
.foregroundColor(Color.clear)
.background(Color.clear)
.frame(width: 200, height: 200, alignment: .center)
.clipped()
.mask(Image(uiImage: self.helper.loadedMaskImage!)
.resizable()
.frame(width: 200, height: 200, alignment: .center))
This image is rendered correctly. If loadedMaskImage is a circle for example, i see the original image in a circle shape. Now i'd like to show a circle dashed border on this image. But I don't want to use any specific shape, because the loadedMaskImage can be anything at runtime.
Is this possible without diving back into UIKit UIView?
EDIT:
This is how i can mask the view. In this case i'm using a circle image as a mask and the result is correct. Now on top of this i'd like to have a dashed border that has the same shape of that circle.
The dashed border can be achieved by using a dashed stroke of color over the image using a ZStack
Circle()
.stroke(Color.blue, style: StrokeStyle(lineWidth:5 , lineCap: .round, dash:[10, 5]))
.frame(width: 200, height: 200)
The dash argument is an array where here it means for every 10 length of showing the border there should be 5 length of no border which appears as dashed border,
I set the width and height of the frame exactly equal to your image's width and height so that it looks as though the circle is just bordering your image
You can set the first property to anything like Color.black.opacity(0.4) or even a LinearGradient if you wish so...
I have a stencil shape of type basic.Image which is showed in Stencil without a label as in the following screenshot:
Is there any way I can add a label which will be displayed at the bottom of this shape in the Stencil?
The full code is the following:
new joint.shapes.basic.Image({
attrs: {
image: { width: 50, height: 50, 'xlink:href': 'data:image/png;base64,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' },
text: { text: 'image', 'font-size': 9, display: '', stroke: '#000000', 'stroke-width': 0 }
}
})
Thanks to Rappid/ jointJS support, I solved my problem by disabling a CSS rule which was responsible for hiding the label of any Stencil shape of type basic.Image this way:
.stencil .elements .element.basic.Image text
This label is now visible under this shape at Stencil and it is disappeared when adding this shape to the graph, as wanted.
I'm trying to add transparency to my CanvasJS background.
CanvasJS uses backgroundColor in order to choose the color of the background of the canvas.
I tried writing "None" instead of a color code but it's giving me a black background.
Also it would be nice to have the ability to choose different opacities for the background.
To set transparent background you can set backgroundColor: "transparent". And if you like to give transparency to any color you can use rgba color coding, for example: backgroundColor: "rgba(225,150,150,0.5)".
You can set background-color: transparent; and it will show no color.
Opacity can be set by using rgba. For white 50%, it would be background-color: rgba(255, 255, 255, .5);
I've never used CanvasJs and don't know how that script will effect things but in basic CSS these will do the trick.
I found the answer eventually. You can just have the backgroundColor with en empty string (backgroundColor:'') and it will omit the background color and leave it transparent.
I would still like to know if it's possible to add transparency to a color, so if anyone knows, please comment.
According to Canvasjs document you will be able to set background color, use rgba(0, 0, 0, 0) for transparent (of course you can change the inside values to fix your purpose):
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Title with Background Color",
padding: 5,
backgroundColor: rgba(0, 0, 0, 0),
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
]
}
]
});
chart.render();
}
Hope this help :)
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
Full demo http://jsfiddle.net/canvasjs/7b0xdcwv/
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.