PageSize selection/dropdown not expanding #33

sensboston · 2023-04-27T02:43:33Z

Describe the bug
Similar to the #31 but I'm using bootstrap 4.1.3, same as your demos

To Reproduce
Steps to reproduce the behavior:
Start the project, click on PageSize select - nothing happened

Expected behavior
It should expand and show all possible values I provided in settings, i.e.

                    <paging total-records="Model.TotalRecords"
                            page-no="Model.PageNo" 
                            page-size="Model.PageSize" 
                            show-prev-next="true"
                            show-first-last="true"
                            show-total-pages="false"
                            show-total-records="false"
                            show-page-size-nav="true"
                            max-displayed-pages="20"
                            page-size-dropdown-items="100-200-500-1000-2000"
                            show-gap="true">
                    </paging>

Screenshots

On the screenshot, the very right select/dropdown is mine, working fine. Your select isn't expanded, unfortunately

Desktop (please complete the following information):

Windows 10
Chrome, FireFox
latest

Additional context
Here is my page code:


@page
@model Skynet.Server.LogViewer
@addTagHelper *, LazZiya.TagHelpers

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width" />
    <title>Server log</title>
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
        }
        table#controls th, td {
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 15px;
            padding-right: 15px;
        }
        table#logs tr:nth-child(even) {
            background-color: #EEEEEE;
        }
    </style>
    <script>
        function toggleSort()
        {
            document.getElementById('sortTrigger').checked ^= 1;
        }
    </script>
</head>

<body>
    <div style="position: sticky; top: 0; background-color: white; border-bottom: 1px solid white; padding: 0px">
        <form method="post">
            @Html.AntiForgeryToken()
            <table id="controls">
                <tr>
                    <td>From:</td>
                    <td>To:</td>
                    <td>
                        <label>@Html.CheckBoxFor(m=>m.ShowInfo, new {onchange="form.submit();"})&nbsp;Info&nbsp;&nbsp;</label>
                        <label>@Html.CheckBoxFor(m=>m.ShowWarning, new {onchange="form.submit();"})&nbsp;Warning</label>
                    </td>
                    <td>Log records with specific text:</td>
                    <td>Total log entries:&nbsp;@Model.TotalRecords</td>
                    <td>Errors:&nbsp;@Model.ErrorsCount</td>
                </tr>
                <tr>
                    <td>@Html.TextBoxFor(m => m.FromDate, "{0:yyyy-MM-dd}", new {type="date", onKeyDown="return false;", onchange="form.submit();"})</td>
                    <td>@Html.TextBoxFor(m => m.ToDate, "{0:yyyy-MM-dd}", new {type="date", onKeyDown="return false;", onchange="form.submit();"})</td>
                    <td>
                        <label>@Html.CheckBoxFor(m=>m.ShowError, new {onchange="form.submit();"})&nbsp;Error</label>
                        <label>@Html.CheckBoxFor(m=>m.ShowCritical, new {onchange="form.submit();"})&nbsp;Critical</label>
                    </td>
                    <td>
                        <input type="search" size="40" name="FilterString" value="@Model.FilterString">
                        <button asp-for="FilterString" type="submit">Apply</button>
                    </td>
                    <td>Warnings:&nbsp;@Model.WarningsCount</td>
                    <td>Critical:&nbsp;@Model.CriticalCount</td>
                </tr>
            </table>
            <hr/>
            <table style="width: 100%">
                <tr>
                    <th style="width:14%">
                        <button type="button" class="btn btn-secondary" style="width:100%" onclick="toggleSort();form.submit();">
                            UTC Time&nbsp;&nbsp;@(Model.DescSort ? '▼' : '▲')
                        </button>
                    </th>
                    <th style="width:8%"><button type="button" class="btn btn-secondary" style="width:100%">Level</button></th>
                    <th style="width:76%"><button type="button" class="btn btn-secondary" style="width:100%">Message</button></th>
                </tr>   
            </table>
            @Html.CheckBoxFor(m=>m.DescSort, new {@id="sortTrigger", @hidden="true"})
        </form>
    </div>

    <div style="padding: 0px 0px 50px 0px;">
        <table id="logs" style="width: 100%; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;">
            @foreach (var entry in Model.LogEntries)
            {
                <tr>
                    <td style="width:14%">@entry.EntryTime</td>
                    <td style="width:8%">@entry.LevelName</td>
                    <td style="width:76%">@entry.Message</td>
                </tr>
            }
        </table>
    </div>

    <div style="position: fixed; bottom: 0; height: 50px; width: 100%; background-color: white;">

        <table style="width:100%">
            <tr valign="baseline">
                <td style="width:99%">
                    <paging total-records="Model.TotalRecords"
                            page-no="Model.PageNo" 
                            page-size="Model.PageSize" 
                            show-prev-next="true"
                            show-first-last="true"
                            show-total-pages="false"
                            show-total-records="false"
                            show-page-size-nav="true"
                            max-displayed-pages="20"
                            page-size-dropdown-items="100-200-500-1000-2000"
                            show-gap="true">
                    </paging>
                </td>

                <td>
                    <form method="post">
                        @Html.AntiForgeryToken()
                        <select asp-for="PageSize" name="PageSize" onchange="form.submit();">
                            @foreach (var pageSize in Model.PageSizes)
                            {
                                <option value="@pageSize" @(pageSize == Model.PageSize ? "selected=\"selected\"" : "")>@pageSize</option>
                            }
                        </select>
                    </form>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>

Here is C# code behind (related to your control):

        [BindProperty]
        public int PageNo { get; set; } = 1;

        [BindProperty]
        public int PageSize { get; set; } = 200;

        [BindProperty]
        public int TotalRecords { get; set; } = 1000;

The text was updated successfully, but these errors were encountered:

LazZiya · 2023-04-29T07:45:41Z

Hi @sensboston ,

What is your bootstrap js library version? if it is v5 you need to add this line: render-mode="Bootstrap5".

sensboston · 2023-04-29T18:12:14Z

@LazZiya , I'm using css only, version 4.1.3 (I posted a page source code above). Might be I need to add some scripts but I don't like the idea to add a lot of js code behind. Practically, I already implemented a pretty simple workaround:

        <table style="width:100%">
            <tr valign="baseline">
                <td style="width:99%">
                    <paging total-records="Model.TotalRecords"
                            page-no="Model.PageNo" 
                            page-size="Model.PageSize" 
                            show-prev-next="true"
                            show-first-last="true"
                            show-total-pages="false"
                            show-total-records="false"
                            show-page-size-nav="false"
                            max-displayed-pages="15"
                            page-size-dropdown-items="100-200-500-1000-2000"
                            show-gap="true">
                    </paging>
                </td>

                <td>
                    <form method="post">
                        @Html.AntiForgeryToken()
                        <select name="PageSize" onchange="form.submit();">
                            @foreach (var pageSize in Model.PageSizes)
                            {
                                <option value="@pageSize" @(pageSize == Model.PageSize ? "selected=\"selected\"" : "")>@pageSize</option>
                            }
                        </select>
                        @Html.TextBoxFor(m => m.FilterString, new {@hidden="true"})
                    </form>
                </td>
            </tr>
        </table>

Might be, it's a good idea to completely get rid of some third-party scrips in your control?

P.S. BTW, I forgot to say "Thank you" for that kind of useful control, it saved a lot of my time!

LazZiya · 2023-04-29T18:46:40Z

Glad to know that this library is helping you and that you found a nice workaround for your issue :)

Re using js, as mentioned in the docs it is required when using the dropdown:

Thank you for your idea to get rid of some third party scripts! I will consider it as optional feature for a future release.

sensboston changed the title ~~PageSize select/dropdown doesn't populate~~ PageSize selection/dropdown not expanding Apr 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PageSize selection/dropdown not expanding #33

PageSize selection/dropdown not expanding #33

sensboston commented Apr 27, 2023

LazZiya commented Apr 29, 2023

sensboston commented Apr 29, 2023

LazZiya commented Apr 29, 2023

PageSize selection/dropdown not expanding #33

PageSize selection/dropdown not expanding #33

Comments

sensboston commented Apr 27, 2023

LazZiya commented Apr 29, 2023

sensboston commented Apr 29, 2023

LazZiya commented Apr 29, 2023