How to show td content when its too long?

Question

I have an html table which one of it's field is too big, its a JSON file. I would like to show it in the following way: the TD content will be a button, and when its clicked, the JSON content is shown in a new window.

I thought of doing it by putting the JSON as, for example, an hidden div, and when the button is clicked, I will show that div's content, but it seems ugly, and I think that there is a better and more elegant way of doing it.

If it's helping, I am using rails.

What is the best way of doing that?

what is wrong in putting it as a hidden div? you can use ajax to call on button, get your json data and then put that data inside the div — Mandeep, Jun 22 '14 at 08:02
Is your question technical or layout design? what is the behavior you're looking for? — webkit, Jun 22 '14 at 08:21

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Here is a previous question that has a good answer for this problem.

You can add an onClick event where you remove the cropping, to show the whole contents and vice versa.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 22 '14 at 07:44

Frement

756
5
10

score 0 · Answer 2 · answered Jun 22 '14 at 07:58

I have once dealt with a very large grid (167 columns and 2000 rows), one column in which has a really long contents, so did this, I showed about first 200 chars of content then "...", and when user hovers on that cell, I simply showed the whole content in tooltip. So basically put the whole content in cell but show only limited content at first by making overflow hidden and putting some marker like "..." and then on hover show whole contents in tooltip.

score 0 · Accepted Answer · answered Jun 22 '14 at 08:34

The bottom line here is you need to use Javascript on the button to load the pop-up / modal; and then show the contents of the JSON file in that new element. How you show that JSON should either be with AJAX or by using a hidden div

--

Modal

enter image description here

Modal elements are simply divs positioned absolutely on the page (on top of your other content). They can contain any "normal" HTML you wish, and basically just allow you to give the impression of a pop-up.

They are really just JS-enabled div elements which appear after event binding. I would recommend using one of these with your button - you'll need to bind the button's "click" event to trigger the modal to load:

#app/assets/javascripts/application.js
$(document).on("click", ".button", function(){
   // Trigger modal
});

There are many modal JS plugins you can use:

Bootstrap Modal (most developers' favorite)

LeanModal (we use this)

FancyBox (mainly for images)

--

JSON

The way to handle your hidden text is going to be slightly trickier.

There are two ways to do it:

AJAX 2 Hidden Div

The Ajax way is most efficient (avoids any superfluous data being added to your page); but it's the most tricky.

Here's what I'd do:

#app/assets/javascripts/application.js
$(document).on("click", ".button", function(){
    $.ajax({
        url: "your_json_url",
        dataType: "json",
        success: function(data){
            // Trigger Modal
        }
    });
});

This will allow you to create a model & handle any JSON request like this:

#app/controllers/your_controller.rb
respond_to :json, only: :your_json_action

def your_json_action
    respond_with @your_code
end

This will basically take the ajax response, and append it to a form which you'll be able to then show.

-

An alternative is to use a hidden div:

#css
.hidden { display: none; }

#view
<table>
    <tr>
        <td>test</td>
        <td>test2</td>
        <td>
            test3
            <div class="hidden">
                your json content here
            </div>
        </td>
    </tr>
</table>

How to show td content when its too long?

3 Answers3