JavaScript：画面サイズが変わってもレコードを1行に収める方法

JavaScript：画面サイズが変わってもレコードを1行に収める方法

レコードをTableに記載した時、1つのカラムが長く全体を調整されてしまうときがあります。

そんな時に上手く調整する方法です。

サンプルコード

<div class="col-lg-6 col-lg-offset-0">
    <div class="panel panel-default col-lg-12 col-lg-offset-0">
        <div class="panel-heading">{{ Auth::user()->name }} 様 へのお知らせ</div>
        <div class="panel-body">
        <table id="list" class="btn100">
            <colgroup>
                <col style="width:30%;">
                <col style="width:20%;">
                <col style="width:50%;">
            </colgroup>
            <tr>
                <th>日時</th>
                <th>配信者名</th>
                <th>件名</th>
            </tr>
            @foreach($contacts as $contact)
            <tr data-href="/contacts/{{$contact->id}}/edit" class="change_pointer">
                <td>{{date_format($contact->updated_at,'Y-m-d　H:i')}}</td>
                <td>{{$contact->name}}</td>
                <td>{{$contact->subject}}</td>
            </tr>
            @endforeach
        </table>
        </div>
    </div>
</div>

列ごとのサイズは【<colgroup>】で指定していますが、この中の『件名』に長いものがあった時、この設定を無視し自動調整がされてしまいます。

具体的には、日時や配信者名の幅が狭くなり件名に幅を取られます。

はみ出た文字を...で省略して1行レコードにする

<style>
    .overflow{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 20px;
        margin:0px;
        padding:0px;
    }
</style>

<div class="col-lg-6 col-lg-offset-0">
　...省略...

                <td><div class="overflow" style="width:300px;">{{$contact->subject}}</div></td>
</div>

こんなコードを入れて幅を指示すれば簡単に【省略 + ... 】で1行レコードにしてくれます。
が、これだと画面サイズに関わらず300px で省略が実行されてしまいます。

レスポンシブな時代には合わないですよね。

JavaScriptで画面サイズを取得して省略サイズを可変させる

<style>
    .overflow{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 20px;
        margin:0px;
        padding:0px;
    }
</style>

<div class="col-lg-6 col-lg-offset-0">
　...省略...

                <td><div class="overflow conts">{{$contact->subject}}</div></td>
</div>
<script>
    var wsize = $(window).innerWidth(); 
        $('.conts').width(wsize/12*6*0.4); 
</script>

行っている事は次の通りです。

これで画面サイズが変わっても丁度いい位置で省略してくれます。

まとめ

私は最初、JavaScriptに苦手意識がありました。
だけど意外と簡単なんですよね。

上のコードでは手動でWindowを小さくした時にはリロードしなくてはなりませんが、そんなのも感知するコード書いとけば勝手に処理してくれます。
こう言うの書くと「便利だよなぁ」と実感しますね。

＼ 最新情報をチェック ／