My borders don't collapse in pandas styler - css

A function that defines the layout of a dataframe. All is well, except I need my borders to collapse. I have tried everything. I need NO borders in my headers(col headers and index) but need a collapsed small grey border in my cells. Strangely enough I also have white borders in my headers even though I did not define that.
`
def style_df(df_):
def style_negative(v, props=''):
return props if v < 0 else None
cell_hover = {
"selector": "td:hover",
"props": [("background-color", "#7FB3D5")]
}
index_names = {
"selector": ".index_name",
"props": "font-style: italic; color: white"
}
headers = {
"selector": "th",
"props": "background-color: #273746; color: white;font-size: 12px;font-family: sans-serif"
}
cells = {
"selector": "td",
"props": "background-color: white; font-size: 12px;font-family: sans-serif;border:1px solid #707B7C;border-collapse:collapse"
}
x=df_.style\
.applymap(style_negative, props='color:red;')\
.format(formatter='{:,.2f}%',na_rep='-')\
.set_table_styles([cell_hover,index_names, headers,cells])
return x
df_dict={"col1":np.random.random(10),"col2":np.random.random(10)}
df_random=pd.DataFrame(df_dict)
df_random
style_df(df_random)
`
I tried border-collapse:collapse in only td and th or only in table. Nothing works.

This is my view after adjusting for the answer of Sergey. Still white space between cells.

headers = {
"selector": "th",
"props": "background-color: #273746; color: white}
}
cells = {
"selector": "td",
"props": "background-color: white; font-size: 12px;font-family: sans-serif;border:1px solid #707B7C;border-collapse:collapse; border: 0.5px solid"
}
Output:
p.s. the white border for the header is specified in your header, see this example, how it works:
headers = {
"selector": "th",
"props": "background-color: #273746; color: green;font-size: 12px;font-family: sans-serif;border-collapse:collapse; border: solid"
}
cells = {
"selector": "td",
"props": "background-color: white; font-size: 12px;font-family: sans-serif;border:1px solid #707B7C;border-collapse:collapse; border: 0.5px solid"
}

Related

Add custom bindTooltip class

I am trying to add custom class to my bindTooltip but the new class do not show up. My method based on this question.
My custom popup class is working fine but if I want to overwrite the tooltip class than it is now working.
My JS code:
var PopupClass={'className': 'class-popup'}
var TooltipClass={'className': 'class-tooltip'}
L.marker(
[46.17319713, 21.34458608],
{icon: OnlineMarker}
).bindPopup(
'Test Popup',
PopupClass
).bindTooltip(
'Test Tooltip',
{direction: 'top', permanent: true, offset: [10,0]},
TooltipClass
).addTo(MyMap)
My CSS code:
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background:#2980b9;
color:#fff;
font-size:10px;
line-height:10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color:#2980b9;
}
.class-popup .leaflet-popup-tip-container {
width:40px;
height:20px;
}
.class-popup .leaflet-popup-tip {
background:#2980b9;
}
/* tooltip-class*/
.class-tooltip{
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
You have 2 issues:
You try to specify your Tooltip class using a 3rd argument of .bindTooltip, which does not do anything as per Leaflet doc. Instead, you should merge your className key in the 2nd argument (options). For that, you can either:
write it directly within the options
extend your TooltipClass with your options: L.Util.extend(myOptions, TooltipClass)
use the ES2018 spread operator to do the same as the above point.
Your .class-tooltip selector in CSS is not enough to override the default Leaflet style. Increase your selector specificity, e.g. adding the Leaflet tooltip class: .leaflet-tooltip.class-tooltip
var MyMap = L.map('map').setView([46.17319713, 21.34458608], 11);
var PopupClass = {
'className': 'class-popup'
}
var TooltipClass = {
'className': 'class-tooltip'
}
L.marker([46.17319713, 21.34458608])
.bindPopup('Test Popup', PopupClass)
.bindTooltip('Test Tooltip', {
direction: 'top',
permanent: true,
offset: [10, 0],
//'className': 'class-tooltip'
...TooltipClass // using spread operator (ES2018)
}, TooltipClass) // 3rd argument does not do anything
.addTo(MyMap);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(MyMap);
/* popup-class*/
.class-popup .leaflet-popup-content-wrapper {
background: #2980b9;
color: #fff;
font-size: 10px;
line-height: 10px;
}
.class-popup .leaflet-popup-content-wrapper a {
color: #2980b9;
}
.class-popup .leaflet-popup-tip-container {
width: 40px;
height: 20px;
}
.class-popup .leaflet-popup-tip {
background: #2980b9;
}
/* tooltip-class*/
.leaflet-tooltip.class-tooltip {
background: green;
border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
border-right-color: cyan;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<div id="map" style="height: 180px"></div>

how to add border to header and body of tabpanel xtype

Creating an EXT js file:
Add border to header and body of tabpanel.
I have tried adding below stuff in .scss file, but did not work.
*.scss
.maintabpanel1 {
.x-tab-bar-plain { border:1px solid red !important;
}
.x-tab-bar-top+.x-panel-body, .x-panel.x-tabpanel-child {
border: 1px solid green !important;`enter code here`
}
You need to provide cls and bodyCls to your tabpanel.
An cls optional extra CSS class that will be added to this component's Element. The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.
A bodyCls class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
In this gitlab-repo, I have created a demo using ExtJS6.2. I hope this will help/guide you to achieve your requirements.
screenshot from my local.
CODE SNIPPET
Ext.define('GeoLocation.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
cls: 'x-geo-tab',
bodyCls: 'x-geo-tab-body',
controller: 'main',
titleRotation: 0,
tabRotation: 0,
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'it is tab 1'
}, {
title: 'Tab 2',
html: 'it is tab 2'
}, {
title: 'Tab 3',
html: 'it is tab 3'
}]
});
CSS part
.x-geo-tab {
.x-tab-bar-default {
background-color: #ece2e2;
border: 2px solid red !important;
padding: 5px;
.x-tab-bar-strip-default {
background-color: red;
height: 2px !important;
}
}
.x-geo-tab-body {
border: 2px solid green !important;
padding: 10px;
}
}

How to change icon filling color in toastr

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

How to change Extjs4 CSS for specific panel

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.

fontawesome: can not change color of stacked icon

Here is the plunker - http://plunker.co/edit/npLOW06U0aAVZmGAHv7U?p=preview
In style.css, I do
.icon-stack .icon-sign-blank: {
color: red;
}
.icon-stack .icon-trash: {
color: white;
}
but it does not changes color, what is that I am doing incorrect here?
It does change colour, but you have unnecessary colons : after both selectors, simply remove them:
.icon-stack .icon-sign-blank {
color: red;
}
.icon-stack .icon-trash {
color: white;
}
http://plunker.co/edit/6z6bMO1opw6zyxAz4DN4?p=preview
just declare a separate class e.g
.red{
color:red;
}
and include it when calling the icon class i.e
<i class="icon-stack red"></i>

Resources