How to make a specific introjs tooltip width longer? I'm able to change the text color using css but changing the width is not working.
CSS:
.customTooltip * {
color: #4a4a4a;
font-size: 18px;
}
.customTooltip .introjs-tooltip-title {
color: #0a41c9;
}
//Not working
.customTooltip .introjs-tooltip {
min-width: 500px;
}
IntroJs:
const intro = introJs();
intro.setOptions({
steps: [{
title: 'Title',
intro: 'Long Intro',
tooltipClass: 'customTooltip'
}
]
})
did you want to resize the parent div?
you can try
.customTooltip {
min-width: 500px;
}
directly, and your can add !important too.
Related
This is my situation:
I have a web app that allow users to change the UI size. (i.e. small, medium or large button)
Users can change how it looks like dynamically during runtime. All text and form input boxes will be resized.
My project is in Vue.js.
What is the best way to solve this? Loading different css when user click?
Load different CSS while user click the button similar to this . Codepen : https://codepen.io/anon/pen/NJEoVM
HTML
<div id="app" :class="size">
<div class="text">Text</div>
<input class="ipt"/><br/><br/>
<button class="btn" #click="change('small')">Small</button>
<button class="btn" #click="change('medium')">Medium</button>
<button class="btn" #click="change('large')">Large</button>
</div>
CSS
.small .ipt{
width: 100px;
height:30px;
}
.small .text{
font-size: 18px;
}
.medium .ipt{
width: 300px;
height:50px;
}
.medium .text{
font-size: 32px;
}
.large .ipt{
width: 600px;
height:100px;
}
.large .text{
font-size: 64px;
}
Javascript
new Vue({
el: '#app',
data:()=>({
size:'small'
}),
methods:{
change(val){
this.size = val
}
}
});
Actually, you can make use of Custom Properties aka CSS variables.
Firstly, define the button CSS styles
/* button.css */
#buttonRef {
--fontSize: 16px;
font-size: var(--fontSize)
}
The overall flow would be something like the following one e.g
methods: {
changeButtonSize: function(size, event) {
event.preventDefault();
/* size might be either of 's', 'm', 'l' */
/* let the button ref is stored in refs */
const buttonRef = this.$refs[“buttonRef”];
let fontSize = 16;
switch(size) {
case 's':
fontSize = 12;
case 'm':
fontSize = 18;
case 'l':
fontSize = 22;
}
/* dynamically change the value for custom property */
buttonRef.style.setProperty("--fontSize", fontSize);
}
}
you can set up 3 classes:
.small {font-size:12px}
.medium {font-size:18px}
.large {font-size:24px}
Then add or remove them to your main parent div onClick.
If you have discreetly set the font-size on the elements, you'll have to target those elements as such:
.small .description { font-size:12px }
.small .title{ font-size:16px }
I have an event limit link inside a day cell for a full calendar and I'm trying to vertically align it in CSS.
Here is a link to my js fiddle here
It looks like fullcalendar wraps a div around the anchor tag that is the eventLimit link, that ideally would be the best element to vertically align but I don't know if I can access it in CSS. Maybe I can in fullcalendar somehow with eventRender??
Can this be done easily in CSS or is there a better way to do itusing some way in full calendar?
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 1,
eventLimitText: function (numEvents) {
return numEvents;
},
events: [
{
title: 'Event',
start: '2017-09-18'
},
{
title: 'Event',
start: '2017-09-18'
}
]
});
});
You need to set your table height to match the height of its container
Try updating your CSS to this:
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
vertical-align: middle
}
.fc-content-skeleton,
table,
tr {
height: 100%;
}
Here you go with. check the JS Fiddle
http://jsfiddle.net/rbynbu4z/1/
I added the below code
.fc-row .fc-content-skeleton,
.fc-row .fc-content-skeleton td,
.fc-row .fc-content-skeleton table,
.fc-row .fc-content-skeleton tr{
height: 100%;
vertical-align: middle;
}
.fc-row .fc-content-skeleton td div {
display: inline-block;
line-height: 100%;
}
Use line height for the anchor, it will vertically align the text inside the cell.
here is the fiddle;
td.fc-more-cell {
text-align: center;
font-size: 2.3em;
}
td.fc-more-cell a{
line-height:85px;
}
I have toastr success and error messages shown in my application. I changes the colors of the background and the font color. I want to change the icon colors shown in the messages. I have searched everywhere for this but I can't find a way to change the fill color of the icon or at least changing the icon. Below is a screenshot of success message
Below is for the error message,
I want to change the icons shown in these messages of change the filling color of the icons. The code in js file,
.success(function(data) {
toastr.success('Successfully Build ', 'Congratulations!', {
closeButton: true
});
}).error(function(err) {
toastr.error('Cant Build', 'Error', {
closeButton: true
});
In css,
#toast-container > .toast-success {
background-image: none;
background-color: #e9e9e9;
color: black;
}
#toast-container > .toast-error {
background-image: none;
background-color: #e9e9e9;
color: red;
}
Toaster uses background PNG images (24x24 pixels) for the icon so your best option is simply to replace them with a colored version you prepared beforehand.
Let's say you prepare a 'black checkmark' PNG of the same size, then the CSS will be:
#toast-container>.toast-success {
background-image: url(<insert here the url pointing to your new PNG>)!important;
}
Now as to creating the icon in the color you want, check flaticon.com (or other similar sites). You should be able to find royalty-free icons and download them of the size and color you want.
Try to use this sample code to have crimson heart
style.css
#toast-container > .toast-success:before {
content: "\f004";
color: crimson;
}
I know this is an old question, but I found a better solution (without re-writing the existing toastr templates icons).
If you don't want to change the current icon of 'toastr-success' but want to create new "templates" with different icons - you can use this pass a specific icon class in the JS:
toastr.info("Click To Open", "more text",{iconClass:"toast-custom"});
And then just set the CSS of "toast-custom":
/* this will set the toastr icon */
#toast-container > .toast-custom {
content: "\f00C";
}
/* this will set the toastr style */
.toast-custom {
background-color: purple;
}
I hope this will help!
CSS
#toast-container > .toast {
background-image: none !important;
}
#toast-container > .toast:before {
position: relative;
font-size: 24px;
line-height: 18px;
float: left;
margin-left: -1em;
color: #FFF;
padding-right: 0.5em;
margin-right: 0.5em;
}
#toast-container .toast{
background-color: #1b75bc !important;
}
#toast-container> .fa-check , .toast {
background-color: #328b17 !important;
}
#toast-container> .fa-trash , .toast {
background-color: #590619 !important;
}
.toast-message{
font-family: Calibri;
}
JS
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "3000",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "300",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut",
iconClasses: {
error: 'fas fa-trash',
info: 'fa fa-info',
success: 'fas fa-check',
warning: 'something',
},
};
enter image description here
Here is the code, very simple and copy paste from office website
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
destructiveText: 'Delete Photo',
titleText: 'Modify your album',
cancelText: 'Cancel <i class="icon ion-no-smoking"></i>',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
I want to change the cancel button have a red color background, how I can achieve it in ionic frameworks?
Easiest way is to look at the markup using your browser (after running ionic serve in your terminal), for example in Chrome ctrl+shift+i, where you can choose the button and see what classes are attached. In your case you'll see something like this:
<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
<button class="button ng-binding"
ng-click="cancel()"
ng-bind-html="cancelText">Cancel</button>
</div>
Which has styles that for the parent div, and child button something like this:
.action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 21px;
}
Just change these values either in Sass or directly in your styles sheet if you're not using Sass.
i am working in extjs4. i have view with ganttChart. I want to change color of splitter line which is between treecolumn and gantt. i am creating gantt as=
var gantt = Ext.create("Gnt.panel.Gantt", {
itemId :'project-list-gantt-chart',
cls : 'projectlistganttchart',
enableTaskDragDrop: false,
columnLines :true,
lockedGridConfig :{
split: false
},
viewPreset : 'customPreset',
columns : [{
xtype : 'treecolumn',
sortable: true,
dataIndex: 'Name',
}],
And i am including this gantt in my following form panel=
Ext.define('GanttChart' ,{
extend: 'Ext.form.Panel',
border: false,
})
By using panel's add method i am including it as-
afterrender : function(){
var me = this;
me.add(gantt);
}
So for changing color, i change css as-
.x-panel-default{
border-color: red;
padding: 0;
}
But its changing color of all panels within my project. So how to override this css so that it will change color of only gantt.
Use the ui cfg param for that:
// add this config line to your panel that host the gantt
ui: 'gantt'
and add this css
.x-panel-gantt{
border-color: red;
padding: 0;
}
Note that the ui is meant for exactly such things.
You might want to refer to this fiddle. Note that it may miss some css classes but I guess it should show you the trick. And please note that you will need to set the border in a correct way because based on the theme the border might be 0px. That is also done in the example. In addition here is the demo code:
Javascript
Ext.create('Ext.panel.Panel', {
title: 'test',
height: 200,
width: 200,
ui: 'custom',
renderTo: Ext.getBody()
})
CSS (just copied from developer tools)
.x-panel-body-custom {
color: black;
font-size: 13px;
font-size: normal;
}
.x-panel-custom{
border: 1px solid red;
padding: 0;
}
.x-panel-body-custom {
background: white;
border-color: #157fcc;
color: black;
font-size: 13px;
font-size: normal;
border-width: 1px;
border-style: solid;
}
.x-panel-header-custom {
background-image: none;
background-color: #157fcc;
}
.x-panel-header-custom-horizontal-noborder {
padding: 10px 10px 10px 10px;
}
.x-panel-header-custom-horizontal {
padding: 9px 9px 10px 9px;
}
You can use id of the component(panel) itself or any top level id of the component in which the panel is rendered like
#toplevelid .x-panel-default{
border-color: red;
padding: 0;
}
You should be able to get your gantt item and change the css class of it using something like:
var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');
I haven't tested this but you can get the idea.
If you want to reset the css class for the item use .setCls() to set it up from scratch.