We are upgrading XPages application to version 12.0.2. The CKEditor version shipped with the platform has changed to 4.18 (from 4.5.6.1).
Now, when the CKEditor is initially hidden, e.g. in a hidden Bootstrap tab, the height is set to 0.
We could set the autoGrow_onStartup to false, but it would stop the autogrow also in scenarios where it works fine as it's in a reusable component. The autoGrow_minHeight is not set, so the default should be used.
I have checked CKEditor and autogrow code and it seems that it does not detect the height of the content, so the variable is set to "auto", which is converted to NaN numeric value. Later on, the code calls resize(..,NaN,..). The previous version ignored the NaN, but now it's converted to 0 - probably by
height = convertCssUnitToPx( height );
Currently, the only solution I see is to create an own autogrow version that would handle the NaN height and convert it to the default height.
Does anyone have a better idea? Thanks.
Related
i have a function where i manually set the width of a jqgrid column. If I after this want to use the resize handle, it adds or substracts relative from the original width size. So it doesn't see my new width to take as a base. I have tried putting the width and withOrg in the colModel without success.
I have a click handler inwhich i resize a column to a certain width on click. i set the width of the th trought JS. After this i would like to be able to use the .ui-jqgrid-resize element for resizing the column.
a short version of my code, say the th is 200px wide:
$('th').dblclick(function(){
$(this).width('100px');
});
after the user doubleclicked, and the th went smaller in size to 100px, the user uses the resize handle to widen the th 10px. The expected result is a th of 110px wide, but the thjumps to 210px wide. It adds the 10px the user wanted to add to the original state, not the state i have set with the doubleclick.
I would recommend you to use setColWidth method, from the plugin which I wrote before (see the answer), to change the width of the grid column. You can download the current version of the plugin from github.
If you trying to set the width of columns based on the width of the content of the column then I would recommend you to take a look at the demo created for the answer and read the answer too. I don't see the suggested code as final solution, but the demos shows my view on the problem and the ways to implement "autowidth" functionality.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I am working with the Kendo UI beta (v. 2013.1.226) and I found that there are some glitches when you change the font size of a combobox.
The drpodown arrow doesn't seem right - it is a bit up while it shouold perfectly position itself in the center of the dropdown button.
To illistrate - I am attaching a screenshot.
Anyone know if there's a way to fix this?
I am thinking of somehow change the x and y position of the background to be relative.
Any help will be appreciated.
Update: Not quite sure if it's only me but found another problem changing the font size, the list seems to overlap the input field as shown in the second image:
I am using IE 9. Anyone have those problems or is it just me?
As far as I know Kendo shouldn't be interfering with other styles on the page (the styles start with k- prefix) so I am wondering if the issues only occur for me or are common.
The KendoUI Combobox is made up of multiple components and has its own styling for all the parts including the arrow. The arrow is actually two nested spans in the version I am using (2013.1.514).
I changed my textbox heights and got different alignment problems:
I would not expect the supplied KendoUI CSS to survive a font-size change as they are tweaked to look good at its own default font size. Your best bet is to use Chrome's F12 tools to determine what CSS styles are affected and tweak the Kendo styles (or your overrides) to match your requirements.
I am using split view from the below link:
https://github.com/asyraf9/jquery-mobile/tree/gh-pages
When I click on the Demo button the menu page changes but the right panel is not changing as shown in the demo page. Could some one give some clues whats the issue ?
Below is the demo link:
http://asyraf9.github.com/jquery-mobile/
Thanks
It looks like that demo uses jQuery Mobile 1.0 Final (based on the date at the top of the JS include).
You can ignore the rest if you are actually using jQuery Mobile 1.0 Final.
In 1.0.1, jQuery Mobile moved to only using page-transitions for browsers less than 1000px wide (I believe that's the number). In 1.1.0 this was altered to use only the fade transition for browsers with a screen-width that is too large.
This behavior has been added to jQuery Mobile because transitions usually look chunky on large screens (because so many pixels have to be drawn simultaneously).
Setting a max width for transitions
By default, transitions can be disabled (set to "none") when the
window width is greater than a certain pixel width. This feature is
useful because transitions can be distracting or perform poorly on
larger screens. This value is configurable via the global option
$.mobile.maxTransitionWidth, which defaults to false. The option
accepts any number representing a pixel width or false value. If it's
not false, the handler will use a "none" transition when the window
width is wider than the specified value.
Source: http://jquerymobile.com/demos/1.1.0-rc.2/docs/pages/page-transitions.html
I have a jCarousel setup that has users click thumbnails to replace a larger image. It works fine in Webkit, but clicking the smaller thumbnails in Firefox opens the image in a new window. Thoughts?
The problem Len was having was jCarousel was returning the error:
Error: jCarousel: No width/height set for items. This will cause an
infinite loop. Aborting...
The error text is pretty self-explanatory. This is usually fixed by either explicitly defining the width or height of the item in HTML or CSS (whichever is appropriate for the element), or using the init option itemFallbackDimension when initializing jCarousel in your Javascript file. For example:
$('#myItems').jCarousel({
scroll: 1,
vertical: true,
itemFallbackDimension: 150
});
The itemFallbackDimension will be the width if your carousel is horizontal, or height if it is vertical (IIRC).