Is there any way to change the placeholder text color in a Braintree javascript generated hosted field? I don't see it as one of the options you can pass into the constructor. Our design is on a dark background, and the placeholder values aren't visible.
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
There is a way to change the placeholder color, which isn't documented since it's not a 100% fix.
However, in your JS you could do the following:
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14pt'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
},
'::-webkit-input-placeholder': {
'color': 'pink'
},
':-moz-placeholder': {
'color': 'pink'
},
'::-moz-placeholder': {
'color': 'pink'
},
':-ms-input-placeholder': {
'color': 'pink'
},
},
This isn't a 100% fix because not all browsers support even adding a placeholder, so when styling the placeholder element, the browser prefixes are needed so that each browser can attempt to render the style you want. If a customer goes to access this outside of a browser specified, however, it won't be a fix.
Related
As you can see in this codepen link, I have replaced the header text with v-text-field but the problem is the v-text-field is attached with filterBy icon (the up-down arrow icon) as well. When i click on the text-field the filterBy function is working that i dont want. So far I think the #click event is covering whole area. I wish to separate the text-field and filterBy behavior. Any help will be greatly appreciated.
https://codepen.io/MicroDreamIT/pen/vYRvMza
You can disable the filter option on v-table columns by using the property 'sortable'.
Your headers data should look like that :
headers: [
{
text: "Dessert (100g serving)",
align: "left",
value: "name",
sortable: false // this will disable filter property and hide the icon
},
{ text: "Calories", value: "calories", sortBy: true },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
I'm using CKEditor v5 so the user can edit some text that will be included in an email that has to be readable by the Outlook email client.
It seems Outlook doesn't like the color styling that CKEditor generates when CKEditor sets the color of some text:
<span style="color:hsl(0, 75%, 60%);">red text</span>
The Outlook client ignores the color style and renders the text as normal.
How do I tell CKEditor to use an older color styling, something like:
<span style="color:#ff1a1a;">red text</span>
You can provide fontColor configuration to use RGB Hexcode instead of HSL like below in ckeditor.js file
Editor.defaultConfig = {
toolbar: {
items: ["heading", "bold", "italic", "link"],
shouldNotGroupWhenFull: false,
},
fontSize: {
options: [9, 11, 13, "default", 17, 19, 21],
},
fontColor: {
colors: [{
color: '#E64C4C',
label: 'Red'
},
{
color: '#E6994C',
label: 'Orange'
},
{
color: '#E6E64C',
label: 'Yellow'
},
]
},
// This value must be kept in sync with the language defined in webpack.config.js.
language: "en",
};
CK Editor 5 documentation link: https://ckeditor.com/docs/ckeditor5/latest/api/module_font_fontcolor-FontColorConfig.html
I am using Chart JS 2.6.0. I am using a blue background for the chart with labels in white colour. However, when chart gets rendered on the screen, there is a black border across the labels, as shown here:
Is there a way to get rid of this border or if I can style the border itself and make it transparent or white somehow?
Update:
Adding the code for reference. I am setting font color and size within 'ticks' object of xAxes and yAxes:
const TYPE = 'horizontalBar';
let data = {
labels: ['National', 'Banner Groups'],
datasets: [{
backgroundColor: '#fff',
data: [10, 20]
}]
};
let options = {
showDatapoints: true,
scales: {
maintainAspectRatio: false,
responsive: true,
xAxes: [{
ticks: {
fontColor: '#fff',
fontSize: 15,
beginAtZero: true
},
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
fontColor: '#fff',
fontSize: 15,
fontStyle: 'bold'
},
gridLines: {
display: false
}
}]
},
legend: {
display: false
}
};
let cf: any = {
type: TYPE,
data: data,
options: options
};
I tried the jsfiddle in the 2nd comment to the original question. I do not see the black border at any browser window size. Is this perhaps browser specific? Or maybe even the fonts available?
The environments I tried:
Windows 10 Home
Firefox 54.0 (32-bit)
Edge
IE 11
Google Chrome
Fedora 24 4.11.6-101.fc24.x86_64
Firefox 54.0 (64-bit)
Google Chrome 59.0 (64-bit)
Android (Samsung Galaxy Prime)
Google Chrome
It looked correct in all of those, at all screen sizes.
I am using a kendo chart. I have stacked columns in my chart. I am using shared tooltip. The problem is that by default even if i am not hovering over the series bars(hovering just above the bars) the tooltip shows up. I want the tooltip to be displayed only when my mouse is over the bar.Is there a way to change this default behaviour?
<div id="chart">
</div>
<script>
$("#chart").kendoChart({
seriesDefaults: { type: "column", stack: "true" },
series: [{ data: [1,2,3] },{ data: [4,5,6] },{ data: [7,8,9] }],
tooltip: {
visible: true,
shared: true
}
});
</script>
Kendo requires JQuery, so you have to initialize the kendoChart inside a JQuery function. What threw me off is the fact it was still working...just not with the desired functionality. I'm surprised the chart didn't just stop working altogether. Either way, If you update your code as below, you should see the tooltip working as expected.
<div id="chart">
</div>
<script>
$(function() {
$("#chart").kendoChart({
seriesDefaults: { type: "column", stack: "true" },
series: [{ data: [1,2,3] },{ data: [4,5,6] },{ data: [7,8,9] }],
tooltip: {
visible: true,
shared: true
}
});
});
</script>
I also created a Dojo showing the working example: http://dojo.telerik.com/iboqU
I have bar chart and the following code for that:
var line1=[['0-1',275134],['2-3',261562],['4-5',285681],['6-7',915432],['8-9',555131]];
var line2=[['0-1',353628],['2-3',287898],['4-5',297550],['6-7',103313],['8-9',616089]];
jQuery.jqplot('_container', [line1, line2],
{
title: 'title',
seriesColors: [ "#eee", "#ccc"],
seriesDefaults:{
renderer:jQuery.jqplot.BarRenderer,
rendererOptions:{barPadding:5, barMargin:5,highlightColors: ["#000", "#FF1100"]},
pointLabels: {show: false}
},
legend:{
renderer: jQuery.jqplot.EnhancedLegendRenderer,
show:true,
showLabels: true,
labels: ["Label 1", "Label 2"],
rendererOptions:{numberColumns:2},
placement:'outsideGrid',location:"s"
},
axes:{
xaxis:{renderer:jQuery.jqplot.CategoryAxisRenderer, rendererOptions:{showDataLabels: false},showTicks: false},
yaxis:{tickOptions: {showGridline: true}}
},
highlighter: {
tooltipAxes: 'y',
formatString:'%s'
},
cursor:{style:'default', show: true, zoom:true, showTooltip:false}
});
How to add highlighting for bars by way as seriesColors works, so added highlightColors works by another way it's highlight first four bars ("#000", "#000","#FF1100","#FF1100"), but needed result is like ("#000","#FF1100","#000","#FF1100","#000","#FF1100", ...)?
The issue you experienced here was caused by a bug in the barRenderer.js and the only way to fix it seems to be edit of the appropriate line of its code, as explained here.
The required change involves replacing of pidx with sidx in the line:
var opts = {fillStyle: s.highlightColors[pidx]};
To verify it, I made a jsfiddle where you can quickly see that it fixes the problem.