I want table rows to disappear (by animating their height to 0px and opacity to 0). I'm using the following  $('#somecellelement').closest('tr').children('td').css('overflow','hidden'); $('#somecellelement').closest('tr').children('td').animate({     height: '0px',     opacity: 0 },500);   Where #somecellelement is something contained in cells of rows I want hidden. Opacity is animating correctly but the table row doesn't get smaller. If I set height: 500px then it works, but I need the row to disappear.  I cannot remove the element from DOM, though, due to scripts expecting values from form elements in those rows.
74778
I'm trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes up the layout.  Any ideas how to work around this?  Here's the code:  $.get('/some_url',    { 'val1': id },    function (data) {     var row = $('#detailed_edit_row');     row.hide();     row.html(data);     row.slideDown(1000);   } );
10846
I have a table that is just a little too wide for a 3.33" column. Is there a way to simply shrink the table a little to make it fit? I'm OK if the 10pt font becomes 9pt-something. Here is an example.  \begin{table} \centering \begin{tabular}{r|lll} \multicolumn{1}{r}{} &amp; \multicolumn{1}{l}{Heading 1} &amp; \multicolumn{1}{l}{Heading 2} &amp; \multicolumn{1}{l}{Heading 3} \\ \cline{2-4} Row 1 &amp; Cell 1,1 &amp; Cell 1,2 &amp; Cell 1,3 \\ Row 2 &amp; Cell 2,1 &amp; Cell 2,2 &amp; Cell 2,3 \end{tabular} \end{table}
51680
I am using  \resizebox{\columnwidth}{!}{% ... %}   to fit a table which might be too wide onto a page by scaling it down.  However, my problem is that if the table is smaller than the column width, it gets scaled up, which looks really ugly, and, more importantly, it can then become too long to fit on the page.  So how do I change above to either shrink it or keep it the same, but not scale it up?  I need something along the lines of  \resizebox{min(\columnwidth,\originalwidth)}{!}{% ... %}
83036
I have a table on a web page where I need to let the user reorder the rows. I was thinking of letting the user drag the rows to reorder them. But how would I let the user know that he could do that? Should I make an empty cell as the first column with dots or vertical lines like gmail has for each email in the inbox? Where can I get an image like that? Do I use a "grabbing hand" icon for the cursor or a "move" cursor? Do I show the cursor while hovering over the table or just the "grab area"? Do I let the user grab any part of the row to drag?
104576
I'm just trying to get a simple show/hide experiment running using the code below. It runs fine when the code is outside the SLDS grid. However when I place the div inside a grid column, the console log "test" is displayed but the div remains visible. Am I missing something?? ..Thanks  Component  &lt;aura:component &gt;         &lt;lightning:button label="Toggle" onclick="{!c.doInit}"/&gt;      &lt;div class="slds-grid"&gt;         &lt;div class="slds-col"&gt;             &lt;div class="slds-box"&gt;                 &lt;div aura:id="detailDiv" &gt;                     &lt;c:ShowHideCmpFilter Message="Detail"/&gt;                    &lt;/div&gt;             &lt;/div&gt;         &lt;/div&gt;             &lt;/div&gt;  &lt;aura:component &gt;   CSS  .THIS.toggle {     display: none; }   Controller  ({     doInit : function(component, event, helper) {         console.log("test");                 var toggleText = component.find("detailDiv");                 $A.util.toggleClass(toggleText, "toggle");             } })
107230
I need to do some custom theming on the search block in Drupal 7.  Specifically, I need to add a class to the submit button that makes it invisible and removes it from the content flow.  So:  &lt;div class="form-actions form-wrapper" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   Becomes...  &lt;div class="form-actions form-wrapper element-invisible" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   I added element-invisible to the edit-actions div element.  However, I can't figure out how to do this.  What's the best practice for doing this sort of thing?
73303
I have the classical table with expandable and collapsible records that if expanded show several subrecords (as new records in the same parent table, not some child div/child table). I am also using tablesorter and absolutely love it.  The problem is that tablesorter isn't keeping expanded child records next to the parent records. It sorts them as if they were top level. So each time the table gets sorted by a column the child rows end up all over the place and not where I want them.  Does anyone know of a good extension to tablesorter or specific configuration that enables tablesorter to keep child rows grouped together with the parent row even after sorting? Or do I have to give up tablesorter in favor of some other API or start the ugly process of writing my own widget? Should I avoid the css-based approach of hiding individual rows of the table to represent collapse rows?
72605
Edit - Original Title: Is there an alternative way to achieve border-collapse:collapse in CSS (in order to have a collapsed, rounded corner table)?  Since it turns out that simply getting the table's borders to collapse does not solve the root problem, I have updated the title to better reflect the discussion.  I am trying to make a table with rounded corners using the CSS3 border-radius property. The table styles I'm using look something like this:  table {     -moz-border-radius:10px;     -webkit-border-radius:10px;     border-radius:10px }   Here's the problem. I also want to set the border-collapse:collapse property, and when that is set border-radius no longer works. Is there a CSS-based way I can get the same effect as border-collapse:collapse without actually using it?  Edits:  I've made a simple page to demonstrate the problem  (Firefox/Safari only).  It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well.  Summary of proposed solutions:  Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."  Specifying border width to 0 doesn't collapse the table.  Bottom td corners still square after setting cellspacing to zero.  Using JavaScript instead- works by avoiding the problem.  Possible solutions:  The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.  Possible solution 2 is to use JavaScript (jQuery, specifically) to style the corners. This solution also works, but still not quite what I'm looking for (I know I'm picky). I have two reservations:    this is a very lightweight site, and I'd like to keep JavaScript to the barest minimum  part of the appeal that using border-radius has for me is graceful degradation and progressive enhancement. By using border-radius for all rounded corners, I hope to have a consistently rounded site in CSS3-capable browsers and a consistently square site in others (I'm looking at you, IE).   I know that trying to do this with CSS3 today may seem needless, but I have my reasons. I would also like to point out that this problem is a result of the w3c specification, not poor CSS3 support, so any solution will still be relevant and useful when CSS3 has more widespread support.
104040
&lt;div aria-hidden="false" aura:id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open slds-hide"       style="width: 60%; margin: auto; "&gt;     &lt;div class="slds-m-bottom--xx-large"&gt;&lt;/div&gt;     &lt;div class="slds-modal__container"&gt;         &lt;div class="slds-modal__header"&gt;             &lt;button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}"&gt;                 &lt;span class="slds-assistive-text"&gt;Close&lt;/span&gt;             &lt;/button&gt;             &lt;h2 class="slds-text-heading--medium"&gt;Create Opportunity&lt;/h2&gt;         &lt;/div&gt;         &lt;div class="slds-modal__content slds-p-around--medium"&gt;             &lt;div class="slds-m-top--xx-large"&gt;&lt;/div&gt;         &lt;/div&gt;         &lt;div class="slds-modal__footer"&gt; &lt;button class="slds-button slds-button--neutral" onclick="{!c.showModalBox}"&gt;Cancel&lt;/button&gt;             &lt;ui:button class="slds-button slds-button--brand" press="{!c.saveOpportunity}" label="Save" /&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/div&gt;  &lt;div class="slds-backdrop slds-backdrop--open slds-hide" id="backGroundSectionId"&gt;&lt;/div&gt;   Controller  //for showing modal $A.util.removeClass(component.find("newClientSectionId"), "slds-hide"); $A.util.removeClass(component.find("backGroundSectionId"), "slds-hide");   CSS  .THIS.slds-hide {    display:none; }
5844
I have an input type="image". This acts like the cell notes in Microsoft Excel. If someone enters a number into the text box that this input-image is paired with, I setup an event handler for the input-image. Then when the user clicks the image, they get a little popup to add some notes to the data.  My problem is that when a user enters a zero into the text box, I need to disable the input-image's event handler. I have tried the following, but to no avail.  $('#myimage').click(function { return false; });
78667
I am trying to hide a column on page load and when a value is selected from a drop-down list, have the hidden dropdown appear. I am able to hide the column but when I choose the value in the drop-down, nothing happens.   This is the code I'm using:    $(document).ready(function(){   //Define which columns to show/hide by default  $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").hide();  //Show/hide columns based on Drop Down Selection   $("select[title='Project Type']").change(function() { if ($("select[title='Project Type']").val() === "Photo")  {      $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").show(); }  else {       $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").hide(); }     }); });       I've also tried to use this one with the same results:  $('nobr:contains("Project Subtype")').closest('tr').hide();    UPDATE: I've added alerts to try and filter out the issue and it seems like   $("select[title='Project Type']").change(function() {   seems to be the issue. But I have no idea why it's not being read.  Thank in advance for any ideas on this one!
2537
If I create a table with several (short) lists, currently I'm using a table construction with enumitem to (almost) remove the left margin. Now I still have a rather large margin at the top and the bottom (above and below) of the itemize lists.   Is there any way I can instruct either the itemize list or the table to remove this margin as well?  Code example:  \begin{tabular}{|m{3cm}|p{5.5cm}|p{5.5cm}|}    \hline     Category 2 &amp;     \begin{itemize}[leftmargin=*]         \item A         \item B     \end{itemize} &amp;     \begin{itemize}[leftmargin=*]         \item C         \item F     \end{itemize} \\    \hline \end{tabular}
82056
I'm brand new to jQuery and have some experience using Prototype. In Prototype, there is a method to "flash" an element &mdash; ie. briefly highlight it in another color and have it fade back to normal so that the user's eye is drawn to it. Is there such a method in jQuery? I see fadeIn, fadeOut, and animate, but I don't see anything like "flash". Perhaps one of these three can be used with appropriate inputs?
81150
The following example code adds a scrollbar around the table if the number of items results in a table that has a height that is greater than 500px.  &lt;apex:outputPanel layout="block" style="overflow:auto; height:500px;" rendered="{!items.size &gt; 0}"&gt;     &lt;apex:pageBlockTable value="{!items}" var="item" columns="3" width="100%"&gt;          &lt;apex:column headerValue="Name"&gt;             &lt;apex:outputText value="{!item.Name}"/&gt;         &lt;/apex:column&gt;           &lt;apex:column headerValue="Count"&gt;             &lt;apex:outputText value="{!item.Count__c}"/&gt;         &lt;/apex:column&gt;           &lt;apex:column headerValue="Unit Price"&gt;             &lt;apex:outputText value="{!item.Unit_Price__c}"/&gt;         &lt;/apex:column&gt;       &lt;/apex:pageBlockTable&gt; &lt;/apex:outputPanel&gt;   The issue is that the table header is inside of the scrolling apex:outputpanel, so as soon as the user scrolls down the header row goes away.  I would like the header row to stay locked/frozen in place.  Is there a setting on the pageBlockTable or some other component that I'm just missing to do this or some other way?  Thanks.
62871
If my html looked like this:  &lt;td class="controlCell"&gt;     &lt;input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" /&gt; &lt;/td&gt;   How could I select #SearchBag.CompanyName with JQuery? I can't get it to work and I fear it's the dot that's breaking it all. The annoying thing is that renaming all my id's would be a lot of work, not to mention the loss in readability.  Note: Please let's not start talking about how tables are not made for lay-outing. I'm very aware of the  and try hard to use it as much as possible.
89933
Hi, I want to create a table in my lightning component. I created 2 lightning:input fields and want to change the vertical alignment to "middle" but it does not work.   I tried to do the following:  &lt;td  class="slds-align-middle"&gt;&lt;lightning:input /&gt;&lt;/td&gt;   and this:   &lt;td&gt;&lt;span class="slds-align-middle"&gt;&lt;lightning:input /&gt;&lt;/span&gt;&lt;/td&gt;   and this:  &lt;td Style="text-align: center;vertical-align:top;" valign="middle"&gt;&lt;lightning:input /&gt;&lt;/td&gt;   I am using slds:      &lt;table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered"&gt;      &lt;thead&gt;...&lt;/thead&gt;      &lt;tbody&gt;       &lt;tr&gt; [td in the middle of the cell] &lt;/tr&gt;      &lt;/tbody&gt;     &lt;/table&gt;   I hope someone can help me. Thanks!
9934
How do you guys go about controlling column padding in tables?   Update  To clarify, I'm looking for a way to control both vertical and horizontal padding. So, if I had a simple table like in the following code snippet, I could pad the columns and make them look a bit less... ugly. :P   \begin{tabular}{|l|l|}     \hline     column 1 &amp; column 2 \\      \hline     I really would like this less &amp; crammed\\     \hline \end{tabular}   I tried this by using the command \vspace but it leaves gaps in the vertical lines.