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

2020.11.17
JavaScript備忘録
JavaScript, Overflow, スクリプト備忘録, 文字列省略, 文字列調整, 画面調整, 自動処理, 自動化

1. 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>

<div class="panel-heading">{{ Auth::user()->name }} 様へのお知らせ</div>

</colgroup>

<tr>

</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>

列ごとのサイズは【<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>

<style>

.overflow{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

height: 20px;

margin:0px;

padding:0px;

}

</style>

　...省略...

<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>

<style>

.overflow{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

height: 20px;

margin:0px;

padding:0px;

}

</style>

　...省略...

<td><div class="overflow conts">{{$contact->subject}}</div></td>

</div>

var wsize = $(window).innerWidth();

$('.conts').width(wsize/12*6*0.4);

</script>

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

JavaScriptで画面サイズを取得する ※ var wsize = $(window).innerWidth();
配置する大きさに加工してclass名を付ける ※ $(‘.conts’).width(wsize/12*6*0.4);
省略したい場所のclassに取り付ける ※ <div class=”overflow conts”>

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

まとめ

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

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

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

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

サンプルコード

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

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

まとめ

関連

Laravel：お問合せからの迷惑投稿を撃退した話 2020.11.17

Django：models.py に記載した参考図書のコードについて疑問を調査した 2020.11.18

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

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

サンプルコード

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

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

まとめ

共有:

関連

Laravel：お問合せからの迷惑投稿を撃退した話 2020.11.17

Django：models.py に記載した参考図書のコードについて疑問を調査した 2020.11.18