I've noticed this for a while now on my Kendo Grids. I haven't been able to find anything on SO or the Telerik Support Forums about it so I figured I would just ask to see if anyone else has this same issue.
Basically, if I set my Kendo Grid to have vertical scrolling, the heading columns for my grid are then offset by the width of the scrollbar which appears in the grid body.
I'm not sure if this is a CSS conflict that I have somewhere or if this is just the way Kendo intends it to be (doesn't seem right though).
Here is a screenshot of what I'm referring to:
As I expected, it was a CSS style that was causing this problem.
Someone at some point overrode the default .kendo-grid-header class and gave it a padding-right of 0px instead of the default 17px.
Changed it back and now it's displaying as I expect it to.
Thank you so much for this answer! While it didn't work for me with the latest version of kendo-grid, it was the reason that I was able to find the answer in the latest version.
We were overwriting the default .k-grid-header class. Inspecting the HTML, we found that the latest version has the padding as 0px 16px 0px 0px.
Related
I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of black circles that are much larger but follow the same contour of the plot.
If I comment out this line in nv.d3.js:
gEnter.append('g').attr('class', 'nv-point-paths');
this doesn't seem to happen and the graph "works" ala without the animations.
Has anyone seen something like that before?
I have just come across this issue myself, and I think I have figured it out, although I am not sure why it's not explained better on the nvd3 pages anywhere.
You need to include a reference to the nvd3 stylesheet in your html which is the ./src/nv.d3.css file in the download/github repo.
My guess is that the black circles are the hover regions for each point on the chart, and the default style for a path in SVG is black filled.
I have raised an issue on github to see if we can get the installation instructions for nvd3 improved: https://github.com/novus/nvd3/issues/19.
It turns out that even if you include the css file the dots will still show up:
https://dl.dropboxusercontent.com/u/318531/so/black-dots.png
It appears to be an issue only with area and line charts, more specifically with the tooltips:
https://dl.dropboxusercontent.com/u/318531/so/selector.png
What I did was hide the tooltips, like this:
<style media="print">
.nv-point-paths {
display: none !important;
}
</style>
I'm not sure if the css selector above will work in all cases, inspect the tooltip element to make sure you are hiding the right element.
PS: I tried to attach screenshots but apparently I don't have enough reputation :-(
If you are new to Angular2, you may have forgotten to add:
encapsulation: ViewEncapsulation.None
which would allow external stylesheets to be loaded.
I had this problem trying to import the nvd3 scatterPlusLineChart into jsFiddle.
Although I added the css external reference, it isn't 'taking';
my workaround was to put the source from nv.d3.css directly in at the top of the CSS region.
Any ideas?
Also, in case anyone else wanted to play with the example, it's at
http://jsfiddle.net/mr23/JHWNr/1/
Obligatory jsfiddle code to satisfy SO.com, even though it's about a reference...
In: CSS field
/********************
* HTML CSS
*/
.chartWrap {
margin: 0;
padding: 0;
overflow: hidden;
}
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.
As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?
Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/
edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.
edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.
I would think you can just leave the overflow property to visible and just use padding left and right.
Unless you have images, the text should just get wrapped.
For images, you should look at using children divs with width:100%
Can you try some jQuery scroll plugins for this?
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
http://baijs.nl/tinyscrollbar/
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Try the jquery selectbox plugin, it's great and do exactly what you are trying to:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
I'm deeply customizing the appearance of a jqGrid with subgrid.
One thing I had to do is to change the Expand/Collapse buttons which is supported by the configuration option, no problem.
The thing is that the width of the column where the Expand/Collapse buttons are is the same size of the images and I want to increase its width.
I tried to "hack" the CSS but I couldn't find a nice way of doing it.
So, is there a way to consistently set the Expand/Collapse column width?
Thanks!
I'll just place my way of doing it.
.jqGridWrapper .ui-sgcollapsed .ui-icon { margin: 8px; }
.jqGridWrapper is a class applied to a div that wraps the grid elements.
I use this to make sure my css customizations will only affect what's inside that div.
Cheers!
I'm running into a issue where by setting an element's display property to display: -moz-box causes that element to start using the border-box sizing model in Firefox i.e. the width and height of the element include the padding and border. This does not happen in Webkit based browsers.
Here is the link to the JSFiddle that illustrates what I'm talking about:
http://jsfiddle.net/S3BCa/
I'm wondering if this is a bug in Firefox (can't seem to find any documentation about it if it is) or if there is a workaround to make this consisten across all browsers?
Yes, this is a bug, currently nothing but border-box is implemented. This has historical reasons, the flexible box model was originally implemented for XUL only and border-box was the only supported sizing model. The relevant bugs are bug 73669 and bug 490359, with bug 635692 indicating a bunch of additional issues. I guess that this will be fixed eventually before the -moz prefix is dropped here, no idea when this will be however.
For now the only option to get consistent behavior across browsers would be specifying box-sizing: border-box. I don't think that there is a better solution, sorry.
I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.
example: www.morecambe-lodge.co.uk
it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.
I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.
Any advice would be greeatly apreciated, Thanks.
The z-index has nothing to do with this bug.
After I read through the following article:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.
The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.
this work for me :
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.
The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.
yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.