I have a textarea in a td element. Currently, when the text area is resized to a width beyond the width of the td element, the entire table resizes to keep the textarea element within the td.
Is there a way to allow the textarea to resize beyond the containing td?
You can add a div with fixed size inside the td around the textarea:
http://jsfiddle.net/kvKZu/4/
(reposting comment as answer)
You can use the max-width and max-height style properties on the textarea. Take a look at:
http://jsfiddle.net/kvKZu/
You can also set them dynamically with javascript if the width and height of the containing row or column is not known in advanced.
I found that applying the style table-layout:fixed to the table fixed this problem.
Related
There is an angular grid and it has 25 columns. Now only 5 columns are visible on the page and to make other columns visible, I have to do horizontal scroll.
I want the text of all the column headers as grid keeps on scrolling horizontally across. any help from protractor experts?
This question has been asked many times but no solution yet.
Wrote below code but it is giving me the text of visible columns only.
var gridclass= $('.ui-grid-viewport');
var columnheader= $('.ui-grid-columns);
browser.executeScript("$(arguments[0]).scrollLeft(arguments[0].scrollLeft + 20)",gridclass.getWebElement());
columnheader.getText();
Expected: I should get the text of all the columns as grid keep on scrolling
Actual: I am getting the text of only visible columns on the page
Assuming .ui-grid-columns identifies the table row containing the all the column headers can you try using the inner text attribute like so
var columnheaders= $('.ui-grid-columns');
columnheaders.getAttribute('innerText')
Use getAttribute("textContent") instead of getText().
This issue could be due to DOM not render the whole page completely. You could try to set the resolution of browser bigger like 3840 x 2160, then getText() all column headers.
On my report, all the fields have their fixed width and height and if the content is longer than the width, it automatically increases the height of field (like G3 on screenshot). But I want it looks like G2 on screenshot.
I turned off text wrap option, dynamic height to false. However it doesn't seem there's change.
Someone can help me please?
Select the cell and set the option Style -> size & position -> x-overflow to true. This allows text to exceed the horizontal limit of its cell.
I Am looking for a Summary row or a Footer row for a grid where i can display total value of all column ,This footer row should not get scrolled(Virtically) .
Please Correct me if i am wrong .A Summary row for a Grid is not available in Dojo as a Default widget.
I Have achieved the above Summary row feature for Grid By
1) Adding a second grid only with Header Just below the Grid where you want footer row ,as a whole its look like a footer row to a Grid
Problems faced are
1) Column resizing i.e., when you resize any column in Grid 1 the same column in Grid 2(Grid with only Header ) must be resized
The above problem can be solved be capturing a resizing event in Grid 1 and propagating the event to Grid 2.
2) When you resize the column we will get Horizontal scroll Bar For both the Grids
Is there a way to propagate Horizontal scroll event from Grid 1 to Grid 2 so that when u scroll the Grid 1 then simultaneously Grid 2 has to get scrolled or how to get only one scroll for two Grids
Is there any other way to achive above feature for a grid .
I have achieved this by "stacking" the grids together. A primary data and footer grid. Use CSS to hide the heading of the footer grid. You have to use javascript to update the sums for the footer grid.
See demo and detailed reference
DoJo EnhancedGrid has a summary property that can be set, as described in the api documentation
I have a Dojo Datagrid which has 10 columns and about 400 records of data... it doesn't seem like that much but it is very very slow to scroll...
I have another Datagrid which has some 5k records and it scrolls faster. The only difference between the two is that for one I am specifying the height in pixels and have autoheight turned off...
For the smaller one, I couldn't use height = 100% to fill up its parent div because for some reason it doesn't like a percent height and doesn't even render the grid if I specify a percent height - I have to give it in pixels... if I use autoheight = true, then it fills up its parent div which is what I want but then it loads ALL data in the grid at once and so it doesn't do any lazy loading of the data.
Any ideas how to achieve lazy loading and still be able to use autoheight = true (or be able to expand the grid so that it always fills up the height of its parent div)?
Thanks
autoHeight can be set to a numeric value, which will define the maximum number of rows to display
I created an HTML for email marketing. I placed a table, and applied a border around it:
<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #982676; margin:0 16px;">
For some reason I am getting 1 pixel extra white space inside when I test it in OUTLOOK 2010. I see it around images that are aligned to the top and to the left, and I see it around other cells that have a solid background color.
See image at this link:screenshot
The top triangle is an image in a cell by itself. The bottom rectangle is a cell with a background color. These were supposes to stick to the border. This is a recurring problem. Has anyone encountered this issue before?
Campaign monitor has a really great solution on how to solve this type of problem. Simple add this style code to your table elements. The code below solved my problem (same as OP) on Outlook 2010
<table align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> ... </table>
EDIT: Links have been replaced with wayback machine since both are gone. I also included a gif of the Email on acid version.
http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010
If that doesn't work, try this.
http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
I found this here:
http://www.emailonacid.com/blog/details/C13/7_tips_and_tricks_regarding_margins_and_padding_in_html_emails
" Table element margins and padding in Outlook 2007 and 2010 can cause issues
If you add margin or padding properties to your TABLE element, it will add that same margin and padding to every nested TD in Outlook 2007 and 2010. Cellpadding and cellspacing attributes are safe but it's best to avoid CSS margins and padding within the containing TABLE element."
So I guess your margin on the table could be causing this.I m not sure.
In case you haven't found a solution to this problem yet:
Make sure you set border="0" for those images within the table cells.
Add border-collapse:collapse; to the table style.
I solved this problem going into the table properties section and then clicking on "Options". Once the options box appears, change the default cell margins for Left and Right to 0" and then click OK.
For borders of 1 and 3 pixel width, the right border has a 1 pixel space behind it. One solution for this (weird...) kind of problem is a "ghost table" behind the current table, with the width of the current table minus 1 and border of 1.
For example:
<!--[if mso]><table border="1" width="699">
<tr style="display:none;"><td> </td></tr>
</table><![endif]-->
Good luck...