Solved

Cant control Data widths within TD elements

Posted on 2014-02-26
13
289 Views
Last Modified: 2014-04-02
I have data that I am displaying within a table.
The table has 5 columns with a header.
Each element has a CSS class assigned to it.

The objective is to keep the column widths fixed over any requeries using a filter on the same page.

The observed behaviour is that the column widths do not respect the min/max width of the CSS properties and shrink to the size of the largest data item.

I have tried wrapping the data with DIVs within the TDs but that is no help. See code attached
0
Comment
Question by:CSUGDEN
  • 7
  • 5
13 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 39890203
No code attached... but it might not help.  You may need to use 'overflow' in CSS.
0
 

Author Comment

by:CSUGDEN
ID: 39890399
Code file is now attached...Sorry Dave!
htmlTableProblem.txt
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39890634
Ok, you need to show me the code seen in the "View Source" of your browser.  It is not possible to tell what your server side code is going to generate.  But it Always ends up as HTML in a browser and that's where we have to identify the problem.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:CSUGDEN
ID: 39891831
I have enclosed the html source from the first page and the source from the second page after a filter expression was applied.

The html was optimized a bit since the initial code but the problem remains
htmlFirstPass.htm
htmlSecondPass.htm
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39892518
I thought that would help but not nearly enough.  You have too many scripts to load (that I don't have) to be able to display that on my computer.  And I would guess that it is supposed to be 'responsive' also which complicates the problem.  If this is available online, then maybe a link would let us see what's going on.
0
 

Author Comment

by:CSUGDEN
ID: 39893282
I am enclosing a screen shot of what I see. I see no visible reason in the HTML for this to occur. I figure it is a peculiarity of oneof the tags.

This app is generetaed using a MVC4 demo. The master page is almost verbatim with what you would find on line. I have also included that here
FirstPass.GIF
SecondPass.GIF
Layout.txt
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39893345
I don't see an actual problem there.  The most likely difference is that in the FirstPass image, there are probably longer strings in cells that are not visible in that view.  Scroll down and you will probably find them.  In SecondPass, there would be no strings longer than what are seen on the screen.  What you are seeing is normal behavior for <td>s in tables that have no specific width.

If you do something like this, all the columns will stay put... as long as none of the data is wider than the column.  You can see that I put a specific width in each of the <th> columns.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<table class="indextable" id="example" border="1">

    <tr>
        <th width="180px">
            Name
        </th>
        <th width="200px">
            Company Name
        </th>
        <th width="240px">
            E-Mail
        </th>
        <th width="180px">
            Phone
        </th>
        <th width="180px">
            Actions
        </th>
    </tr>

        <tr>
        <td class="custindextd">
            Ms. Catherine R. Abel 
        </td>
        <td class="custindextd">
            Professional Sales and Service
        </td>
        <td class="custindextd">
            catherine0@adventure-works.com
        </td>
        <td class="custindextd">
            747-555-0171
        </td>
        <td class="custindextd"> 
        

            <a href="/Customer/Edit/29485">
            <img alt = "Edit" src="/Images/edit.gif"  class="Icon" title="Edit"/>
            </a> 
            <a href="/Customer/Details/29485">
            <img alt = "Detail" src="/Images/details.gif" class="Icon" title="Info"/>
            </a>            
            <a href="/Customer/Delete/29485">
            <img alt = "Delete" src="/Images/del.gif"  class="Icon" title="Delete"/>
            </a> 
            <a href="/Customer/Sales/29485">
            <img alt = "Sales" src="/Images/information.gif"  class="Icon" title="Sales"/>
            </a> 
         </td>
    </tr>
        <tr>
        <td class="custindextd">
            Mr. Christopher R. Beck Jr.
        </td>
        <td class="custindextd">
            Bulk Discount Store
        </td>
        <td class="custindextd">
            christopher1@adventure-works.com
        </td>
        <td class="custindextd">
            1 (11) 500 555-0132
        </td>
        <td class="custindextd"> 
        

            <a href="/Customer/Edit/29546">
            <img alt = "Edit" src="/Images/edit.gif"  class="Icon" title="Edit"/>
            </a> 
            <a href="/Customer/Details/29546">
            <img alt = "Detail" src="/Images/details.gif" class="Icon" title="Info"/>
            </a>            
            <a href="/Customer/Delete/29546">
            <img alt = "Delete" src="/Images/del.gif"  class="Icon" title="Delete"/>
            </a> 
            <a href="/Customer/Sales/29546">
            <img alt = "Sales" src="/Images/information.gif"  class="Icon" title="Sales"/>
            </a> 
         </td>
    </tr>
        <tr>
        <td class="custindextd">
            Mr. Donald L. Blanton 
        </td>
        <td class="custindextd">
            Coalition Bike Company
        </td>
        <td class="custindextd">
            donald0@adventure-works.com
        </td>
        <td class="custindextd">
            357-555-0161
        </td>
        <td class="custindextd"> 
        

            <a href="/Customer/Edit/29568">
            <img alt = "Edit" src="/Images/edit.gif"  class="Icon" title="Edit"/>
            </a> 
            <a href="/Customer/Details/29568">
            <img alt = "Detail" src="/Images/details.gif" class="Icon" title="Info"/>
            </a>            
            <a href="/Customer/Delete/29568">
            <img alt = "Delete" src="/Images/del.gif"  class="Icon" title="Delete"/>
            </a> 
            <a href="/Customer/Sales/29568">
            <img alt = "Sales" src="/Images/information.gif"  class="Icon" title="Sales"/>
            </a> 
         </td>
    </tr>
        <tr>
        <td class="custindextd">
            Mr. Cory K. Booth 
        </td>
        <td class="custindextd">
            Remarkable Bike Store
        </td>
        <td class="custindextd">
            cory0@adventure-works.com
        </td>
        <td class="custindextd">
            121-555-0157
        </td>
        <td class="custindextd"> 
        

            <a href="/Customer/Edit/29531">
            <img alt = "Edit" src="/Images/edit.gif"  class="Icon" title="Edit"/>
            </a> 
            <a href="/Customer/Details/29531">
            <img alt = "Detail" src="/Images/details.gif" class="Icon" title="Info"/>
            </a>            
            <a href="/Customer/Delete/29531">
            <img alt = "Delete" src="/Images/del.gif"  class="Icon" title="Delete"/>
            </a> 
            <a href="/Customer/Sales/29531">
            <img alt = "Sales" src="/Images/information.gif"  class="Icon" title="Sales"/>
            </a> 
         </td>
    </tr>
		</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:CSUGDEN
ID: 39895926
perhaps I havent explained this properly. I would like the style info to truncate the output of the longer-than-width of the column.

I tried your example also by drastically shortening the width and it only wrapped. I also tried style="width:20px;overflow:hidden;    min-width:20px;    max-width:20px; white-space:nowrap;" which i though should have worked but that also wrapped.

Is there any solution using html or do I have to adjust the data source?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39895950
I would have thought that would work too but it clearly doesn't.  I don't know at the moment.
0
 

Author Comment

by:CSUGDEN
ID: 39917439
I am going to cancel this question and perhaps with time come closer to the answer.
Thank you for your help
0
 

Accepted Solution

by:
CSUGDEN earned 0 total points
ID: 39961389
After spending numerous hours of my own time on this problem while waiting for others to comment I have made the following progress and come to the following conclusion:

1. It has been sometime since I fixed this bug and I thought I closed out this POST
1. Wordy and/or complex CSS files can be disasterous to your health
2. I have overcome my own bug by finding a spurious character in my CSS sevral lines prior to the CSS controlling the widths and before a CSS comment line.
3. The spurious character caused the controlling-width CSS not to be recognized
4. My thanks to Dave Baldwin for at least giving some thought and his own time to this problem
5. I suppose he should be awarded some points for his effort although at the time I though that might have been considered poor taste to give him less than his due and close out the POST.

Thanks for calling out the attention to this matter
0
 

Author Closing Comment

by:CSUGDEN
ID: 39971706
This was clearly a bug in my own code and perhaps the attachments were redacted not to show the spurious character
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to use question mark (?) in filename with html 25 73
Why "Mobile First"? 5 20
I'm a Human captcha checkbox 13 23
CSS DIV Height in Percent 1 9
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question