I am trying to add padding to all of the cells within my DataGrid (not DataGridView). I want there to be space between the walls of the cell and the text within the cells. Is there any way to do this? I have looked into this and all I see is how to do it with DataGridView and not DataGrid...
Here is a picture of the DataGrid with no padding:
Notice how the the text is pushed tight to the line on the right side.
Please help! Thank you!
This is what worked for me:
I created a CSS file and added left and right padding to td:
td {
padding-left: 5px;
padding-right: 5px;
}
I then added a reference to that CSS file into the same markup file where my DataGrid is located:
<link href="YourFolderNameHere/YourCSSFileNameHere.css" rel="stylesheet" />
I did try what #TnTinMn suggested in his comment with CellPadding but had no luck.
NOTE: I am unsure if this method will work in all cases or only in my own. By doing this all td elements will take this style, which in my case is fine because I wanted all td elements within every table to have this padding style.
Related
I have converted the pdf into html using pdf2htmlEX. While selecting more than one lines, when cursor goes between two lines the selection jumps upwards. Some one please help to get this fixed.
The issue is already raised here https://github.com/coolwanglu/pdf2htmlEX/issues/62 but the solutions didn't solve the problem. Need help to fix this.
As workaround I have created this styling:
.t {
/* making selection to behave nicer when selecting text between multiple text lines (to avoid element gaps which can cause weird selection behavior) */
padding-bottom: 100px;
margin-bottom: -25px;
/* making selection to behave nicer when selecting text between multiple columns (useful for pages with 2 or more text columns) */
padding-right: 2000px;
}
Problem is that all text elements are absolute positioned and whenever mouse (during selection) leaves text element it fires mouse events on page element (which causes to select text from beginning of page to the starting point) until other text element is reached.
This styling/workaround "fills" those gaps so mouse never reaches page element.
Document should look the same.
Edit: Be aware that this solution relies on proper DOM structure (text elements are ordered). In some scenarios text can become unselectable (eg. when page contains 2 text columns and first text block is actually placed as last child in DOM).
If you get into such problem, try adjusting values to fit nicely in your document, like below:
.t {
/* making selection to behave nicer when selecting text between multiple text lines (to avoid element gaps which can cause weird selection behavior) */
padding-bottom: 40px;
margin-bottom: -10px;
/* making selection to behave nicer when selecting text between multiple columns (useful for pages with 2 or more text columns) */
padding-right: 0px;
}
Selection might jump here and there (again depends on document structure and used values), but still it will be a lot better compared to original state.
I have a RDLC Report with a Tablix. The Tablix has a Row bound to a DataSet. The Row has a Textbox with a width of 400px.
If you get a long string with spaces from the DataSet, it will behave as expected and break the string in new lines, making the textbox grow vertically. The problem happens when you get a long string without spaces from the DataSet, the string doesn't break when it reaches the end of the textbox. Instead, the textbox will grow horizontally to fit the string.
How can I break the string and prevent the Textbox from growing horizontally?
After consulting How to maintain long text inside RDLC report column ?
Counting the characters doesn't solve the problem: the data is coming from a database, so it can be virtually anything. And since I'm not using a console font, the size of the letters will not be the same, so the number of '#' that fit in a space is not the same number of 'i'.
CanGrow Property is bound to the TextBox: So even though you can select a column and set CanGrow to true, it will not set the Column itself to stop growing horizontally, it will just set all selected Textboxes 'CanGrow' property to False.
CanGrow Property only prevent the row from growing vertically: Even if you click on a Column. CanGrow Property only affects Height.
I've found the solution by myself. The RDLC report accepts HTML as Expression, so all you need to do is:
Set a div with a fixed width inside the expression.
Set the MarkupType as HTML
See how the report code changes:
Before:
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>=Fields!TextoCliente.Value</Value>
<Style>
<FontSize>8pt</FontSize>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
After:
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>="<div style='width:400px'>" & Fields!TextoCliente.Value & "</div>"</Value>
<MarkupType>HTML</MarkupType>
<Style>
<FontSize>8pt</FontSize>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
You can set the Expression in the Designer viewer to avoid having to deal with the replacement of '<' with '<', in that mode, you can just type <.
Just in case anyone else finds this, there's a new answer in the possible duplicate link (How to maintain long text inside RDLC report column ?) that appears to be actually correct, and simpler than the accepted answer here or there.
https://stackoverflow.com/a/47495098/793387
I've decided to add pictures in the answer to help explain exactly what needs to happen.
I'll follow the steps from the MSDN tutorial: Change Row Height or Column Width (Report Builder and SSRS) to first show how to set a fixed height and then show how to do the same thing to set a fixed width.
To prevent a row from automatically expanding vertically
In Design view, click anywhere in the tablix data region to select
it. Gray row handles appear on the outside border of the tablix data region.
Click the row handle to select the row.
In the Properties pane, set CanGrow to False.
To prevent a column from automatically expanding horizontally
In Design view, click anywhere in the tablix data region to select
it. Gray column handles appear on the outside border of the tablix data region.
Click the column handle to select the column.
In the Properties pane, set CanGrow to False.
I sincerely hope this is detailed enough.
I have one grid and text box. I want to highlight values in grid which matches with value in text field.
For example, in firefox, if you press cntrl + F4, you will see one text box and you write a value which you want to find. Firefox hightlights string mathing with this value.
Can we do like this in extjs? How?
There is an example of exactly that here:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid/live-search-grid.html
Sandeep, the trick to the highlighting is actually in the CSS.
You can navigate to ../examples/ux/css/LiveSearchGridPanel.css to find the following code:
.x-livesearch-match {font-weight: bold; background-color: yellow; }
You can add the CSS href to your index.html, or add this code to your css
Hope this is what you were able to figure out.
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.
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...