We are using Tiny-MCE in our CMS, and our users would like to have the ability to change the width of a column in a table. Now, I know that from an HTML point, there is no such entity "column", but in the Moodle editor, HTMLAREA, there is a plugin that does that - allows to set a width (only in percents) to a column:
Sorry it's in Hebrew, I couldn't find a version in English...
does anyone know of a plugin to Tiny-MCE that could do that? Or have an idea how I would go about writing such a plugin?
Isn't that what the HTML option is for? :)
Another choice is the styleprops (edit Css Style), not sure how this works completely, but there is an option on the box tab that will let you set a width. I have removed it to avoid shenanigans!
Alternatively you could create several styles which have a width defined and then with the cursor focused on the cell by choosing the style width20percent the box goes 20%.
#Lea Cohen: I found this plugin for TinyMCE -- http://sourceforge.net/tracker/?func=detail&aid=2800315&group_id=103281&atid=738747 -- which sounds like it should do what you wish, perhaps even in a more "user friendly" way than making the user enter widths manually:
Adds the ability to resize a tables' cell borders by dragging the mouse ..
The way I see it working is resizing the first cells acting as the "column" headings which should see subsequent cells in that column inheriting the width settings, e.g.
<table>
<tr>
<td width="300">Col 1</td>
<td width="200">Col 2</td>
</tr>
<tr>
<td>Width 300</td>
<td>Width 200</td>
</tr>
</table>
Update
If that plugin doesn't work for you, you should also have a look at the Table plugin which seems to have options for controlling rows/cells as well: http://tinymce.moxiecode.com/wiki.php/Plugin:table
I found the answer I was looking for. It's an enhancement of the cell dialog box, that adds an option in the select box on the bottom:
The only thing is that you have to make sure you're in the top most cell in the column, as the JS updates only the next cells in the column, and not the previous ones. But other than that - it's just what we needed.
Related
I need to implement a table, in which I can both resize columns and scroll trough the body (as seen here). I am currently using colResizable to resize columns, but I was unable to find a way to make the body scrollable and still keep the columns resizable. colResizable only changes the header's width and expects the columns to behave the same way.
As far as my research went, it is only possible to do scroll through the body by setting display: block on <tbody> which will ultimatly screw up colResizable.
Changing the width of the columns on each drag via JavaScript is possible, but I'd rather go for a html + css only solution, since the table will contain multiple hundred if not thousands of rows and it might effect the performance.
If one of you guys knows a way around this, please let me know.
Edit 1: Unfortunately I am not able to post any code related to my project, since it may contain confidential information, but I believe it is not needed anyways since this problem is not specific to my existing code.
Edit 2: I forgot to mention, that I am using <thead> for my headers. As C4pt4inC4nn4bis pointed out, it is easily doable to resize columns and scroll through <tbody> when not using a <thead> tag. Since I want my headers to stay on top of the table, even while scrolling, I can't simply move everything in <thead> to <tbody>.
It's impossible to show Y-axis scroll at without display:block option.
Also colResizable doesn't support this situation.
Without , the headers can't not be fixed on the top.
Check this code. I manually resize columns whenever resize the table head.
There is an event handler (onDrag) in the colResizable plugin.
$("table").colResizable({
liveDrag: true,
onDrag: function (e) {
$("tbody tr td:nth-child(1)").width($("thead th:nth-child(1)").width());
$("tbody tr td:nth-child(2)").width($("thead th:nth-child(2)").width());
$("tbody tr td:nth-child(3)").width($("thead th:nth-child(3)").width());
$("tbody tr td:nth-child(4)").width($("thead th:nth-child(4)").width());
},
});
If you do not use the liveDrag option, use the onResize event handler.
Hope it helps.
Thank you.
When I inspect an element, and look at the "Computed" CSS tab, I see a list of properties. If I expand any one property I see something like this:
Which makes perfect sense: the drop-down shows the styles in which they were overriden, with the top one the "winner". All these styles have a link to the right that will show the source where they were defined.
What perplexes me, with an element that I'm trying to control the width of, but can't seem to find where it is overriden, is a situation like this:
Note that the top style, that I believe should be the "winner", isn't struck-through, yet the value of the property is very different and there is no source listed to explain this difference. Where is this override coming from?
I have tried reordering my style sheets, styling directly on the HTML element, using !important in the relevant CSS selector, respecifying my selector to as specific as you can get, and still I can't take hold of the width property of this table.
I've poured hours into it so any help is appreciated.
I'm using Firefox, and this issue appears in both Firebug and the Firefox web inspector.
Screenshot of relevant table:
It's likely not being overridden, but being forced to be different by way of content. I see you are inspecting a table's th cell, which will stretch to accommodate the content within it's column, even if it's width is defined in css.
<table>
<tr>
<th>30</th>
<th>30</th>
<th>30</th>
</tr>
<tr>
<td>30</td>
<td>More_than_30!</td>
<td>30</td>
</tr>
</table>
/* CSS */
th {width:30px; background:#CCC;}
td {width:30px; border:1px solid #CCC;}
Here, even though the th and td cells are given a width:30px; that center row's cells' computed widths will be much larger due to the stretching of the data to accommodate the long, non-breaking value. In this case, there is no CSS rule overriding the 30px.
See this fiddle: http://jsfiddle.net/rgthree/kYAG7/
I have this simple html table
<table id="tablex">
<tr>
<th>col1</th>
<th>col2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
and I tried to make it's columns resizable with colResizable
but the problem is when I resize a specific column of the table, the next column to the resizable one is affected because the full width of the table is fixed.
I have tried another solution posted here and other one here but the same problem was present.
Is there an other way to make columns resizable using one of jquery libraries or javascript function?
you can use colResizable 1.5, it allows two different methods of resizing the table: fixed and non-fixed.
By default, it is fixed, which means that when you resize a column, the next one shrinks or expands to fit the whole table. In fixed mode table width does not change at all.
I think you are asking for the non-fixed mode. In non fixed mode you can resize each column independently, so if you change the width of a column the others remain in the same state (but the table will increase its size by the same amount as the column does).
You can check some examples on its website: http://www.bacubacu.com/colresizable
but I guess that you are looking for something like this:
$("#nonFixedSample").colResizable({fixed:false, liveDrag:true});
I had the same question: Resizable table columns with jQuery (table wider than page)
My solution was to place contents of my column headers <th>s inside another tag- I used links (<a>s).
Instead of doing anything with the <th> I had to set the style of the <a>s to display: block
Then just $('th a').resizable({handles:'e'});
See http://jsfiddle.net/u32a1ccL/
This uses jQuery and jQuery UI
I want to put 3 vertical options in a listview. I use a table to accomplish that but only 2 options are visible so I need to compress the cell height. You can see in the picture that there is a free space in each cell.
I've tried some td options like height but no succeded.
Can I use some other html control, maybe a list, to get what i want?
am.
Since you are using a table to create the vertical options, the best you can do to compress the height (besides using smaller font, of course) is to set the cell padding and cell spacing to something small:
<table cellpadding="1" cellspacing="1">
<tr>
etc...
I have tried so many solutions to freeze first column and header(which have multiple rows) but in every solution i have to user custom css (css according to solutions).
In my case I cannot change my previous css. I want code in which on div scroll I can freeze my table(which is dynamic).
Please provide solution.
I've done this like this:
<table style="table-layout: fixed">
<tr>
<td><div style="width:100px; position:fixed;">Frozen Header text</div></td>
</tr>
<tr>
<td>Some data</td>
</tr>
<table>
I am not sure how to get the first column frozen as well, but I suppose you can attempt to use the same strategy, as well as formatting using the <col> tag, similar to this:
<col style="width:100px; position:fixed;" />
Try that, and please let us know how you go.
To achieve what I comets jquery and css use. Here the plugin:link
This is a jQuery plugin that can make table rows and columns not scroll.
It can take a given HTML table object and set it so it can freeze a given number of columns or rows or both, so the fixed columns or rows do not scroll.
The rows to be frozen should be placed in the table head section.
It can also freeze rows and columns combined with using colspan or rowspan attributes.
Fix header is relative simple and easy to implement. and column is a different thing.
for example:
<table>
<tr class="header"><td>header</td></tr>
<tr><td>body</td></tr>
</table>
You have to monitor onscroll envent, and detect if the header is out of view.
When it's out of view, retrieve tr.header's size parameters (also include TDs inside), and its clientX and clientY by using getBoundingClientRect(). make a clone of tr.header by using cloneElement(true) and place it in the same table. then assign size parameters to its TDs, and make this cloned element fixed to screen.
This solution won't not affect your table's styles or layout, while it is complex indeed.