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.
Related
I am using v-selects inside a flexbox, and I would like the v-selects's size to depend on the flexbox settings instead of changing depending on whether a long or short item is selected.
Is there a way to make the width independent of the selected item?
Yesterday I remembered that it didn't happen when I used a v-container, so I mimicked the css of a v-container but with a few changes to apply a different style.
Essentially, if the v-select has rather low width, you can't get around setting the width of the v-select manually if you want it to stay a certain size, which in the end is what v-col is effectively doing.
I wanted it to change depending on the parent's width so I used a percentage and subtracted the total flexbox gap (20px) divided by the number of items (2) in the parent, like this:
.v-select-class {
width: calc(50% - 10px);
}
Hope this helps someone in the future.
I have a function which automatically resize every control according to the screen size. I tried to resize the MSFlexgrid its working but problem is columns are not resizing according automatically with it is there any function so that columns width automatically resized with it?
No, there's no built in auto-column scaling for MSFlexGrid. You'll have to write one yourself.
Thankfully it's fairly straightforward, although don't forget to allow for scroll bars.
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 want slickgrid to autosize the columns based on the widest content or header text - whichever is wider. In simpler terms, I want it to simulate the default behavior of regular HTML tables when it comes to column sizing. How can I do it in slickgrid?
When constructing your options, you can use forceFitColumns: true
var options = {
enableCellNavigation: true,
forceFitColumns: true
};
This will make the columns fill the entire width of your grid div.
The OP is looking for columns to grow to match their content. grid.autosizeColumns() grows the cells to fit the parent container, which is not the same thing.
I have added this feature, and it is about as manual as you might imagine. You loop through the displayed cells and measure each one, saving the widest cell and using that width to set the width of your column. SlickGrid gives you good access to the cells in the viewport, so that works nicely.
The measurement algorithm is your big decision. You may put the content off screen and measure it, as #jay suggests. This works, but it is the slowest method, as it requires a repaint to insert, and a repaint when you remove. There may be ways to optimize. The solution I went with is to measure the width of every letter in the alphabet, as well as other typographic characters we come across, and sum them to generate a width. Yes, this sounds absurd. It has many constraints: The font size must be the same, it doesn't support images, there can't be any line returns, and more. If you can live with the constraints though, you can calculate sizes for a huge grid viewport in <5ms, because the character widths are only measured once.
After you get the sizes of the columns, you assign them to your columns using grid.setColumns().
Slickgrid will not support column auto size based on data.You need to write a plugin or fork the slickgrid core to modify.
Here is the link I have created a plugin to handle slickgrid auto size
https://github.com/naresh-n/slickgrid-column-data-autosize
I added this after the grid is drawn and it works fine.
$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
You should be able to call the autosizeColumns() method of the grid object.
grid.autosizeColumns();
Make this simple adjustment to Naresh's https://github.com/naresh-n/slickgrid-column-data-autosize, on the init function:
Add $container.ready(resizeAllColumns); to the init function.
This ensures the columns autoresize on initial load
Insert the text into an off-screen element and retrieve the width of the element. This is what excanvas does to measure text. Use this to set the width of the column since it's expecting a pixel value.
I'm having hard time with tables and column widths.
Update: I'm using XHTML Strict 1.0.
The page is: http://www.pro-turk.net/try
The first problem I have is, I have a column with a fixed width of 100px and 4px padding, but it disobeys my padding depending on the value. The column width (as the distance between two borders according to W3C Box Model) is 156 px even if padding is 0 or 4. Only the position of the text changes.
According to W3C Box Model ( available at www.pro-turk.net/box_model.png ), borders and paddings aren't included in WIDTH attribute, so why does it render wrongly ?
The second problem is, when you look the page I gave with IE8, the first cell in the second row has 150px fixed width, but ie shows it about 50% of the total table width regardless of what i say.
You're using the default auto table-layout mode. That lets the browser decide fairly arbitrarily how much space to assign to each column, usually depending on the amount of actual content in the cells. In this mode, width is little more than advisory.
If you want the browser to take your column widths seriously you should set table-layout: fixed on the <table> element, and either include <col/> elements with explicit widths, or set widths on the cells in the first row, for the columns you want to be fixed-width. (The other columns will share the remain width equally.) fixed table layout also allows the browser to render faster.
For your page you might be better off with CSS positioning. Certainly for the internal table that seems to exist only to float-left the image. Nested tables are to be avoided.