As the picture show I want change the size of trigger and time selection box. I once try some methods but no use.
So, i built a fiddle: FIDDLE
According to your image you're using Neptune theme, so did i. But you haven't provided a version so i used the latest one.
Lets start with picker size. Setting width was pretty easy, but height required some css works. I define picker sizes: wSize &hSize, and fontSize at the top of the function, so you can change it.
Now about trigger size. Well trigger comes with one image of containing all sort of trigger images inside, that could be displayed(focus, hover etc.):
So i had to change parameters for all of them. I have overriden ext css classes and the thing, that you must be aware of, is that its all about proportions. For example the default size of trigger image is 110x22 and it includes 5 images of 22x22 size each. I changed the size from 22 to 33 so i had to change everything proportionally:
background-size: 110 to 165
background-position(click): 44 to 66
background-position(over): 66 to 99
...(you can see it in index.html)
So if you're going to change the size of trigger, you'll have to do some calculations.
Still there are some components inside the picker which needs to be stretched to look good, but i think you can do it yourself by taking this code as an example.
Related
I have combination chart as displayed in the fiddle using highcharts
https://jsfiddle.net/u1p2ebk0/3/
but while displaying September month plots are not showing the custom icons on the chart really not sure why is this behavior and also when i click no 1m zoom custom icons are showing but on load also it should show the icons not sure what i am missing
All flags are not displayed because there is no place for them all. When you set series.flags.allowOverlapX property to true, all flags will be shown but they will overlap each other. You can try to reduce their size or alternatively modify the amount of setting data depending on rangeSelector selection or chart size.
Let me know in case of any implementation issues.
Demo:
https://jsfiddle.net/BlackLabel/rk95uL10/
API reference:
https://api.highcharts.com/highstock/series.flags.allowOverlapX
I'm using the Signature component in my App. I would like to reduce the font size for buttons CANCEL, RESET of Signature component. Please let me know if any functions available to change the size or style for buttons of Signature component.
Thanks
This isn't available right now. But it makes sense to have something like that so for the next update (which will be out on Friday June 15th 2018) we'll add the following 3 theme constants:
sigButtonOKUIID
sigButtonResetUIID
sigButtonCancelUIID
So if you want cancel and reset to have a smaller font just create a theme entry matching a small font button (you can derive from Button). Lets say you named it SmallFontButton. Then in the theme constants you just define the sigButtonResetUIID=SmallFontButton and do the same for the cancel button.
That should provide you with full control over the appearance of these widgets.
I need to dynamically change the header row height of an ng grid, depending on which column headers need to be displayed. Some columns have a very long header and I want the column name to wrap so they don't need to be excessively wide. I also don't want a lot of blank space if I initially set a tall header height, but then don't need the space if those long column names aren't displayed.
The issue is I cannot get the headerRowHeight to dynamically change. It took some time to realize that I cannot even initialize headerRowHeight using a scope variable the same way as the other gridOptions (see line 23).
See plnkr
The reason this doesn't work is that ng-grid uses absolute positioning under the hood. Grid Options are only fired once, and then the heights are set in the html after that using style= on the html dom node. (THIS IS AWFUL!) They even set the style manually on all of the underlying header dom nodes.
The other avenue I thought of was trying to redraw the grid using ngGridLayoutPlugin. I played around with this for 30 minutes with no luck. You could try manually redrawing the page itself. It looks like ng-grid is not very good at redrawing the grid, and they've made optimizations specifically for updating data, but not the styles.
The 3.0 beta unstable release looks like they've made a lot of changes, and you'll be able to do what you're trying to do easier... however, it is not ready for production. See the header cell class conditionals in this example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass
I had a hell of a time trying to get ng-grid styling to do my bidding at my last job. At a certain point, we were ready to toss it because it was too restrictive. Good luck.
Use this in your CSS.
.ui-grid-header-cell-primary-focus {
line-height: 2.428571;
}
Folks-
I'm working on a d3.js chord diagram that is based on http://bost.ocks.org/mike/uberdata/ :
Line 88 clearly shows the mouseover event for the neighborhood "group" object.
Line 123-130 show how the title is concatenated for the chord.
However, there is no mouseover trigger to show/hide the .text associated with the nodes.
Is this an "automatic" feature of JS? Or is the behavior part of the d3.js script?
The reason I ask is that I need to replace the hover behavior with a click behavior, since it needs to be usable on the iPad.
The default tooltip is an automatic browser feature that is based on the <title> element inside a shape element. In the chord diagram example, you can see group.append("title") at line 91 and chord.append("title") at line 123.
There is no automatic equivalent for touch devices that I know of.
How do I specify the default font size for CKEditor. I tried changing contents.css (body -> font-size) and I tried changing config.js (config.fontSize_defaultLabel) without any success. Does anyone know where i should be looking?
You seem to be on the right track with the contents.css file.
Is your problem that the font size while working in the editor is not correct or is it that the font size isn't being carried over to the page where you actually display the content?
As you know, ckeditor/contents.css is the default style sheet that is loaded while working in the editor, but if you use "config.contentsCss" to call another style sheet, contents.css won't be loaded.
You can call multiple style sheets like this:
config.contentsCss = ['/contents.css', '/css/anotherstylesheet.css'];
If the font size isn't being carried over to the actual page display, you'll need to set the font size in the style sheet used for the actual pages, the default font size used in the editor isn't inserted into the content output by the editor.
"config.fontSize_defaultLabel" is a label only, it doesn't have any effect on the content. Normally, when you load the editor, the font size selector will display "Size". If you set "fontSize_defaultLabel", the font size selector will display whatever value you entered.
If you can provide more details about the problem, I'll try to post a more accurate answer.
Be Well,
Joe