I am using Google org chart and it works great on every browser except Chrome. On Chrome I see these extra lines in between the boxes like this:
For all other browsers, the same page shows up as this:
As you can see there are no blue lines in between the nodes. When I look in firebug or chrome dev tools it appears that its:
.google-visualization-orgchart-node
border: 2px solid #b5d9ea;
That is causing the issue because if i change the border to 0px then the issue goes away (but the border on the actual nodes also goes away which is obviously an issue.
Any suggestion for how to render this correctly in Chrome. I don't see this issue happening in the demo link above.
In my case it was Bootstrap 3 with
border-collapse: collapse;
that was the cause. Fixed it with setting
table.google-visualization-orgchart-table {
border-collapse: separate;
}
.google-visualization-orgchart-linenode {
border: 0;
}
Check whether you have any border rule applied for this css class
.google-visualization-orgchart-linenode
I would try Patrick's answer of setting the .google-visualization-orgchart-linenode {border: 0}. If that doesn't work try setting the border-collapse property since its separate by default.
.google-visualization-orgchart-table,
.google-visualization-orgchart-table tr,
.google-visualization-orgchart-table td {
border-collapse: collapse;
}
Although that's weird that its only showing in Chrome for you. Make sure you have your DOCTYPE setup correctly.
Set the nodeClass option on the chart.draw with a color and background-color to override the default color scheme, which solves the problem in Chrome.
Set two css classes:
//css class for default tree node
.default-leaf { color:black; background-color:#DCDCDC; }
// css class for selected tree node
.selected-leaf { color:white; background-color:#191970; }
While initializing the chart set the nodeClass & selectedNodeClass options:
var chart = new google.visualization.OrgChart( document.getElementById('chart_div'));
// setting options - allowHtml (required for visuals to work), css classes for a tree-node & selected-tree-node
var options = { 'allowHtml': true, 'nodeClass': 'default-leaf', 'selectedNodeClass': 'selected-leaf'};
chart.draw(data, options);
This is what I added to stop the random lines from showing up
<style>
table{
border-collapse: separate !important;
}
</style>
We had an incompatibility with normalize.css that caused this same issue for us. Adding the following CSS fixed it:
table.google-visualization-orgchart-table {
border-collapse: inherit;
}
I also added the following to fix the issue:
table {
border-collapse: separate!important;
}
Related
I am using Google Charts column charts.
Here in the if you observe Server Calculation Time value got breaked to next line.
As of requirement it should be in same line.
Please help me possible solutions
set chart option tooltip to ensure html tooltips are shown
tooltip: {
isHtml: true
}
then you can override the tooltip class,
use following css to prevent wrapping...
.google-visualization-tooltip-item {
white-space: nowrap;
}
Try adding some CSS properties on this class .google-visualization-tooltip:
.google-visualization-tooltip { width:300px; background-color: red; }
As shown in this example: https://jsfiddle.net/zrmwtj3z/
The best solution is not to increase the width of the tooltip manually. Instead, in the HTML for your tooltip, wrap the whole thing in a div element. Use the CSS style white-space: nowrap; to force it to stay on the same line. I also like to add margin: 1em; in order to make it look a little bit nicer.
I have a page which contains charts etc for statistics which must be printable. I want to just use the standard browser print functionality in order to enable printing. I also have css which changes the button colours for selected buttons to make it clear which charts are being viewed. However, my issue is that when i attempt to print the page, this colouring is lost and reset to its default presentation.
I am aware of the capabilities of doing this in Chrome by using webkit-print-color-adjust settings in the CSS, however, the vast majority of users in my business use IE or Edge (as they are microsoft defaults) and therefore i need a solution which would work in them.
I have attempted using !important and #media print but to no effect as yet, unless i am using them wrong.
Here is the css currently:
#media print{
.btn-primary-chart:active,
.btn-primary-chart.active {
color: #ffffff;
background-color: green !important;
border-color: #285e8e;
}
}
Any help would be greatly appreciated :)
From the SO answer here, the reason why your CSS does not work is because of the default settings in the browser print settings.
With Chrome and Safari, you may want to add in
-webkit-print-color-adjust: exact;
to force print the background color.
There isn't any foolproof method to print backgrounds in Internet Explorer and Microsoft Edge yet. However, there's a few methods I've tried before and may work under some circumstances:
Method 1 (using sprite):
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')";
Method 2:
CSS
.background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee;
}
HTML
<body class="background">
But if you want to print it yourself, you can enable 'Print Background Color':
To resolve this behavior, turn on the Print background colors and images option in Internet Explorer. To do this, follow these steps:
On the Tools menu, click Internet Options, and then click the Advanced tab.
In the Settings box, under Printing, click to select the Print background colors and images check box, and then click OK.
Also, a few similar StackOverFlow Posts
CSS #media print issues with background-color;
How can I force browsers to print background images in CSS?
Please try adding "!important" on the style (but not in the #media print).
I just met the problem that font color was missing in print view, and the final solution is replace
color: red !;
with
color: red !important;
in the style.
It seems that some styles will be ignored if "!important" is not used.
I found one solution that will even work in the EDGE browser. Here is the basic HTML:
<div style="position: relative;width:100%">
<div style="border-color:green;border-style:solid;
border-width:15px;width:70%;"></div>
<div style="position: absolute; top: 50%;
transform:translateY(-50%);left: 0px;">
Hello, world.
</div>
</div>
You can adjust the width or the parent and the child div's as necessary.
Worth mentioning here, since I had a similar problem, is that EDGE will render SVG properly while ignoring the HTML background-color.
So instead of using:
<div style="background-color:red; width:20px height:20px">...</div>
You can use something like this:
<svg style="width:20px;height:20px">
<rect width="100%" height="100%" style="fill:red">
</svg>
Actually it is possible to programmatically change the background printing setting for IE:
void CMeetingScheduleAssistantApp::SetPrintBackgroundSetting(CSettingsStore& regSettings, CString strPrintBackground, BOOL& rbResetDefault, BOOL& rbReset)
{
rbResetDefault = FALSE;
rbReset = FALSE;
// Attempt to read the registry key value
if(regSettings.Read(_T("Print_Background"), strPrintBackground))
{
// Update registry key value if we need to
if (strPrintBackground != _T("yes"))
{
regSettings.Write(_T("Print_Background"), _T("yes"));
// Remember, reset it back to original value afterwards
rbReset = true;
}
}
else
{
// User accepted default behavior, so create registry key value
regSettings.Write(_T("Print_Background"), _T("yes"));
// Remember, reset it back to default value afterwards
rbResetDefault = true;
}
}
void CAvailableBrothersReportPreview::OnButtonPrintPreview()
{
CSettingsStore regSettings(false, false);
if (regSettings.Open(_T("SOFTWARE\\MICROSOFT\\Internet Explorer\\Main")))
{
CString strPrintBackground;
BOOL bResetValue = FALSE, bResetResetDefault = FALSE;
// Try to revise the Print_Background setting
CMeetingScheduleAssistantApp::SetPrintBackgroundSetting(regSettings, strPrintBackground,
bResetResetDefault, bResetValue);
// Now show the print preview dialogue
if (m_pHtmlView != nullptr)
m_pHtmlView->DoPrintPreview();
// Reset the Print_Background setting if required
if (bResetValue)
regSettings.Write(_T("Print_Background"), strPrintBackground);
else if (bResetResetDefault)
regSettings.Write(_T("Print_Background"), _T("no"));
}
}
I am currently trying to use Joomla to create a simple website. I uploaded Joomla Extension Survey called Form Maker Lite for the purpose of creating a survey/questionnaire.
I published this extension to my Joomla based website, unfortunately I am unable to resize the table. I tried using width: px to resize the table, however it did not working.
Here is the current auto-generated CSS of the table:
#form10 .wdform-matrix-table {
display: table;
border-spacing: 0px
}
I am having trouble copying the HTML here so I tried using this (results did not come out as expected, it was meant to appear in the form of a table) - My JSFiddle
I also tried using table-layout: fixed; overflow: hidden; but unfortunately that did not help re-size the table. I want to make the width of the table shorter.
Unfortunately I am unable to provide access to the website because I do not have full control/permission over the publicity of the link :(. My apologies.
Any help/advice/solutions would be appreciated.
Having had a quick look at the component, the following styles seem to set a width of 100% pixels to the form by overriding the default settings.
<style>
.wdform_section {
width:100% !important;
}
.wdform_column {
width:100% !important;
}
.wdform-field,.wdform_row {
width:100% !important;
display:block !important;
}
.wdform-element-section {
width:80% !important;
}
.wdform-label-section {
width:20% !important;
}
</style>
As far as I can tell Form Maker Lite adds inline styles to the form elements, which you don't seem to be able to edit, which is why you need !important to override them.
The above styles are over-writing the default "contact" form it has in the Joomla 2.5 version. It may churn out different code for different forms.
If you don't already have it, I'd recommend installing firebug to look at what css it is generating. That can make overriding css far easier.
I designed a contentbox for a website and on the desktop it looked good. But now I want to put it on the mobile.
You can see a example with only relevant html+css here http://pastehtml.com/view/bze2phhwn.html
On my smartphone, ive seen that the border-radius breaks(it displays the background color instead of the border color) in the rounded corners for 1-3px and you can see this effect also on the browser if you zoom in a little bit. Its weird, because if you zoom a little bit out and in, you`ll see that this effect isnt always there. So I tought that it isnt my bad html+css.
What might be the problem?
This seems to be a bug. Submitted to Mozilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=758958
Also: https://stackoverflow.com/questions/10774506/border-radius-causes-white-lines-when-applied-to-individual-corners/10774635#10774635
I think this is a bug as well, but I found a fix... err maybe it would be considered a hack. Here is an image of my issue:
http://i909.photobucket.com/albums/ac298/roboyak/missingBorder_zpsbhftdfmd.png
So my story is that I was getting a reset.css style sheet imposed on me from the parent web page. The td element was getting the following style from that css sheet:
table tbody tr td {
border-bottom: 1px solid #ccc;
}
Long ago when I started the project I overrode this style by stating the following rule in my sheet:
table tbody tr td {
border-bottom: none;
}
In trying to solve my problem I noticed that the border-bottom rule was showing up as "medium none" instead of none. I added the following code, and the border was no longer broken.
table tbody tr td {
border-bottom: none none;
}
Essentially this breaks the rule so the border comes back again on all td's which is not what I want, but I think that this may give some insight into what is happening.
Is there a way to remove CSS styles from an submit button so that the default browser style is applied?
You can set the styles to the system values,
input.overridecss {
background-color: ButtonFace;
color:ButtonText;
}
jsFiddle
Here is a list of values you can override, there is probably a better list but I'm lazy.
[Edit] Here is the Specification which has been deprecated lol,
so here is the correct way I guess,
input[type=button] {
appearance:push-button; /* expected from UA defaults */
}
from Appearence
You can do something like this:
button {
padding:0;
margin:0;
border:0;
background-color:transparent;
}
Hows that?
Store styles that you're applying programatically in a CSS class. When you want to go back to default remove the class.
Well, if you dont mind to use jQuery, you can use following code to remove all styles and classes from submit buttons.
$('input[type="submit"]').removeClass();
$('input[type="submit"]').removeAttr("style");
This will remove all classes as well as inline styles, thus system default button style will be applied to your all submit buttons.
I found that because I had:
* { border: 0; padding: 0; }
etc etc.
in my code which affects submit buttons so I put this is instead:
*:not(input) { border: 0; padding: 0; } etc etc.
This seemed to fix it.
If you're DEVELOPING the site - just remove the rules from the CSS file.
If you so wanted to, you could use Javascript/JQuery to remove/reset them based on some sort of condition if thats what you're looking for, ie:
$("#myButton").css("background","");
And so on...
If you're USING the site, but didn't build it - then you can (depending on your browser - i'm looking at Firefox 4) disable all or partial CSS from rendering using the web developer toolbar options... but I don't know if you can apply that as the 'default' setting for every site you load.