I am trying to add a css class to a highlighted text using TINYMCE editor but if a text with a few paragraphs is highlihted a separate span with a class is added to each paragraph.
Here is the code:
`customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format'} , classes: 'customclass'}`
and if I want to apply the customformat to:
`<p style="text-align: justify;">parapgraph1</p>
<p style="text-align: justify;">parapgraph2</p>`
*I get this: *
`<p style="text-align: justify;"><span class="episodeclass" style="color: #00ff00; font-size: 20px;" title="My custom format">parapgraph1</span></p>
<p style="text-align: justify;"><span class="episodeclass" style="color: #00ff00; font-size: 20px;" title="My custom format">parapgraph2</span></p>`
*How can I get this: *
`<span class="episodeclass" style="color: #00ff00; font-size: 20px;" title="My custom format">
<p style="text-align: justify;">parapgraph1</p>
<p style="text-align: justify;">parapgraph2</p>
</span>`
Related
I'm new in using chart JS, I am trying to customize the legends. I try the example that I found but when I try to make my own it shows this error.
I want to display the legends in separate like in this.
here's my code.
var myLegendContainer = document.getElemenById('legend');
var graphTarget = $("#line-chartcanvas");
graphTarget.attr('height',80);
barGraphQty = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
legend: {
display: false
},
}
});
myLegendContainer.innerHTML = barGraphQty.generateLegend();
});
HTML code
<div class="col-md-4">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Legends</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="legend"></div>
</div>
</div>
</div>
CSS
[class$="-legend"] {
list-style: none;
cursor: pointer;
padding-left: 0;
}
[class$="-legend"] li {
display: block;
padding: 0 5px;
}
[class$="-legend"] li.hidden {
display:block !important;
text-decoration: line-through !important;
}
[class$="-legend"] li span {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 10px;
width: 10
please help me.
Without seeing your code, it's almost impossible to tell why exactly this TypeError occurs. From the posted image, I deduct however that the use of generatelabels is not the ideal choice to achieve what you need.
What you really need is generating custom HTML legend using legendCallback together with some CSS.
Please take a look at the following posts to see how this could be done:
https://stackoverflow.com/a/63216656/2358409
https://stackoverflow.com/a/63202664/2358409
Script :
<v-date-picker v-model="date" #input="changeHours" no-title>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
Demo and full codepen : https://codepen.io/positivethinking639/pen/RwwQpxm
I want to set height of scroll. So the scroll not past the footer or the time schedule displayed is 5 data
How can I do it?
Yes it is possible to set the height of scroll times nest to datepicker.
By default dialog box comes with the scroll that has to be disabled
first, the we can add scroll separately to date picker or time flex
box
Here in the below code, I've moved the datepicker footer buttons as a separate flex and added scroll only to the times, So that it can grow based on number fo time slots
Working codepen here: https://codepen.io/chansv/pen/vYYdKNJ
<div id="app">
<v-app>
<v-content>
<v-container>
<v-btn color="success" dark #click="openModal()">call date {{ date }}</v-btn>
<v-dialog
:return-value.sync="date"
v-model="modal"
content-class="dialog-class"
ref="dialog"
persistent
>
<v-card>
<div>
<v-container grid-list-md text-xs-cente style="padding: 0px;">
<v-layout row wrap>
<v-flex xs8 style="position: fixed;">
<v-date-picker v-model="date" #input="changeHours" no-title>
</v-date-picker>
</v-flex>
<v-flex xs4 style="position: relative; left: 300px;">
<div>
<p class="text-center mt-3 font-weight-bold">Select Time</p> </div>
<p class="text-center subtitle-2 mt-4" v-if="!allowedTimes.length">Please pick date first</p>
<p class="text-center" v-if="!allowedTimes.length"><v-icon>event</v-icon></p>
<div class="my-3" v-show="date !== null" :style="{'background-color':'white','text-align':'center', 'overflow-y': 'scroll', 'height': '220px'}">
<template v-for="(allowedTime, i) in allowedTimes">
<v-btn
:key="i"
#click="setTime(allowedTime)"
class="my-1"
:outlined="allowedTime !== time"
color="primary"
>{{ allowedTime }}</v-btn>
</template>
</div>
</v-flex>
<v-flex xs12>
<v-card>
<v-card-actions style="padding-top: 0px;">
<v-spacer></v-spacer>
<v-btn color="primary" #click="modal = false">Cancel</v-btn>
<v-btn color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</v-card>
</v-dialog>
</v-container>
</v-content>
</v-app>
</div>
css
.v-dialog { box-shadow: none!important; }
.row {
margin-right: 0 !important;
}
.v-picker__body {
flex: none !important;
}
.v-card{
box-shadow: none !important;
}
.dialog-class {
overflow: hidden;
max-height: 345px !important;
max-width: 470px;
}
.v-date-picker-table {
position: relative;
padding: 0 12px;
height: 220px;
}
script
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: new Date().toISOString().substr(0, 10),
modal: false,
footer: false,
time: null,
allowedTimes: ['13:00 - 14:00','14:00 - 15:00','15:00 - 16:00','16:00 - 17:00','17:00 - 18:00','18:00 - 19:00','19:00 - 20:00','20:00 - 21:00','21:00 - 22:00']
// allowedTimes: []
}),
methods: {
save(k) {
console.log(this.$refs.dialog);
},
allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
setTime(time) {
this.time = time
},
changeHours(_val) {
console.log(_val)
this.allowedTimes = ['08:00 - 09:00','09:00 - 10:00']
},
openModal() {
this.modal = true
var self = this;
setTimeout(() =>{
self.setFooter()
}, 0);
},
setFooter() {
if (!this.footer) {
console.log('footer')
var div = document.createElement('div');
var html = "<span><div style='float:left; margin-top:4px; margin-left: 10px; height: 12px; width: 12px; border-radius: 10px; background-color: blue;'></div></span><span style='margin-left: 5px; float: left;font-size:14px'>Available</span><span><div style='float:left;height: 12px; width: 12px; border-radius: 10px; background-color: grey; margin-left:20px; margin-top:4px;'></div></span><span style='margin-left: 8px; float:left; font-size: 14px'>Unavailable</span>";
div.innerHTML = html;
document.querySelector('.v-date-picker-table').append(div);
this.footer = true;
}
}
},
})
I have a ionic app that has a page.html which im tryng to apply this sass code to my flexbox table but cant compile. I have this css to style bg color
.Rtable-cell--light {
background-color: white;
border-color: mix(white,$tableColour,80%);
}
Which i call inside my Rtable-cell with include
.Rtable-cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%; // Default to full width
padding: 0.8em 1.2em;
overflow: hidden; // Or flex might break
list-style: none;
border: solid $bw white;
background: fade(slategrey,20%);
> h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
margin: -$bw 0 0 -$bw; //border collapse offset
#include Rtable-cell--light;
}
Why do i getting the error?
My flexbox table looks like this
<div class="Rtable Rtable--4cols">
<div class="Rtable-cell"><h3>Eddard Stark</h3></div>
<div class="Rtable-cell">Has a sword named Ice</div>
<div class="Rtable-cell">No direwolf</div>
<div class="Rtable-cell"><strong>Lord of Winterfell</strong></div>
<div class="Rtable-cell"><h3>Jon Snow</h3></div>
<div class="Rtable-cell">Has a sword named Longclaw</div>
<div class="Rtable-cell">Direwolf: Ghost</div>
<div class="Rtable-cell"><strong>Knows nothing</strong></div>
<div class="Rtable-cell"><h3>Arya Stark</h3></div>
<div class="Rtable-cell">Has a sword named Needle</div>
<div class="Rtable-cell">Direwolf: Nymeria</div>
<div class="Rtable-cell"><strong>No one</strong></div>
</div>
</div>
You are using wrong keyword.
.Rtable-cell--light is not a mixin, but rather a selector, so instead of #include, you should use #extend, like:
#extend .Rtable-cell--light;
Doc link: http://sass-lang.com/guide#topic-7
I'm using the datepicker from eonasdan (https://github.com/Eonasdan/bootstrap-datetimepicker)
It works great, but when I put it inside a table, it inherits the style of the table. It is as if the datepicker also becomes a table.
How can I avoid this?
I have the following in my CSS:
table.table {
tr {
th {
color: #ff0000; //red
}
}
}
This is my html file:
<table class="table">
<tr>
<th>Reconcile Date</th>
</tr>
<tr>
<td>
<div class="pickdate">
<input type="text" placeholder="Reconcile Date" class="form-control ">
</div>
</td>
</tr>
</table>
This sets the text in my table header to red. It also sets the days of the week and month name in my datepicker to red. Note the pickdate class load the datepicker
By using Google Chrome's inspection tools I was able to find one of the classes on your datepicker table and add the CSS at that level. Here is the CSS and jsfiddle link:
.table tr th{ color: red; }
.table-condensed thead tr th{ color: black;}
https://jsfiddle.net/w8gmcgv4/5/
let me know if these work for you. Thanks!
You can add the following rule to your stylesheet to customize datetimepicker style:
.bootstrap-datetimepicker-widget {
table {
tr {
th {
color: black;
}
}
}
}
Note that the picker has the debug option that allows you inspect component's HTML to simplyfy style customization.
Working example:
jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({
format: "DD/MM/YYYY", debug: true
});
table.table tr th {
color: #ff0000;
}
.bootstrap-datetimepicker-widget table tr th {
color: #000000;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<table class="table">
<tr>
<th>Debt Ref</th>
<th>Reconcile Date</th>
</tr>
<tr>
<td>
<div>NOR087-DAN052</div>
</td>
<td>
<div class="col-sm-12">
<input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
</div>
</td>
</tr>
</table>
<p>
The text in the datepicker shouldn't be red
</p>
I wanna add a color asterix in my form's placeholder, is it possible?
Here is pure css solution IE10+
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 10px;
font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
height: 25px;
font-size: 25px;
left: 10px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
}
<form novalidate>
<div class="input-placeholder">
<input type="text" required>
<div class="placeholder">
Email <span>*</span>
</div>
</div>
<input type="submit">
</form>
At first glance it doesn't seem possible, but it may be a good alternative to create your own fake spanholder element:
<div class="holder">Email Address <span class="red">*</span></div>
<input id="input" size="18" type="text" />
Fiddle
As far as I know, this is not possible.
One solution I have seen used in the past is to add a background-image of a red asterisk to your input field, but that makes it difficult to duplicate the visual alignment you are going for. More info on this method: Use CSS to automatically add 'required field' asterisk to form inputs
Another solution would be to add the span (and placeholder text) outside of the input field, but that would require some JavaScript to control when it is and isn't visible.
Here is a JSFiddle I just created for this method (using jQuery): http://jsfiddle.net/nLZr9/
HTML
<form>
<div class="field">
<label class="placeholder" for="email">
Email Address
<span class="red">*</span>
</label>
<input id="email" type="text" />
</div>
</form>
CSS
.field {
position: relative;
height: 30px;
width: 200px;
}
input, label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
top: 0;
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 5px;
line-height: 30px;
}
JS
$('.field input')
.on( 'focus', function () {
$(this).siblings('label').hide();
} )
.on( 'blur', function () {
if ( !$(this).val() )
$(this).siblings('label').show();
} );
You can try the following :
HTML
<div class="hold">
<input type="text" placeholder="" required="required">
<span class="req_placeholder">Name <span>*</span></span>
</div>
CSS
.hold {
position: relative;
}
input[required="required"]:valid + .req_placeholder {
display: none;
}
.req_placeholder {
position: absolute;
top: 2px;
left: 2px;
}
.req_placeholder span {
color: red;
}
I found a jQuery plugin that might suit you, the pholder plugin.
If you look the demo, the placholder of the "Name" field is red.
There may be other plugins or maybe you can edit it. :)
This is a good case for pseudo-elements.
.someclass {
position:relative;
}
.someclass:after {
position:absolute;
top:0;
right:10px;
content: "*";
color:#ff0000
}
...adjust to your own layout.
You can use pseudo elements in CSS (not supported in old browsers)
.mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #ff0000;
}
.mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ff0000;
}
.mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ff0000;
}
.mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ff0000;
}
.mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #ff0000;
}
<form>
<p>
<label for="input1">Input 1:</label>
<input type="text" id="input1" placeholder="Fill input" class="mandatory" />
</p>
<p>
<label for="input2">Input 2:</label>
<input type="text" id="input2" placeholder="Fill input" />
</p>
<p>
<label for="textarea">Input 2:</label>
<textarea id="textarea" placeholder="Fill textarea"></textarea>
</p>
</form>