locked
Fix width of table columns when replacing element? RRS feed

  • Question

  • User1134142769 posted

    Used by ASP.NET Core.
    If I edit a table cell, the width of the column changes.
     
    Question.
    How to make the column sheir not change during editing the cell?
    How to:
        - the table was placed in the center horizontally;
        - so that I can change the indentation of the table at the top of the page;
        - column width - auto-fit the width of the content.
     
    Project - https://dotnetfiddle.net/Bryhlv

    View

    @using WebApplCore.Models;
    
    @model IEnumerable<Model1>;
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
    <!-- CSS Includes -->
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <style type="text/css">
        .table {
            margin: 0 auto;
            width: 80%;
        }
        .item-display {
            cursor: pointer;
        }
    
        .item-field {
            display: none;
        }
    
    </style>
    <body>
        <div class="container">
            <table class="table table-sm table-hover table-striped">
                <thead class="thead-dark">
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.ID)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Title)
                        </th>                    >
                    </tr>
                </thead>
                @foreach (Model1 sVM in Model)
                {
                    <tr>
                        <td>@sVM.ID</td>
                        <td>
                            <span class="item-display">@Html.DisplayNameFor(model => model.Title)</span>
                            <span class="item-field">
                                <input type="text" value="@Html.DisplayNameFor(model => model.Title)" />                            
                            </span>
                        </td>                    
                    </tr>
                }
            </table>
        </div>    
    </body>
    <script>
        $(document.documentElement)
            .on("dblclick", "span.item-display", function (event) {
                $(event.currentTarget)
                    .hide()
                    .next("span.item-field")
                    .show()
                    .find(":input:first")
                    .focus()
                    .select();
            })
            //.on("keypress", "span.item-field", function (event) {
            //    if (event.keyCode != 13)
            //        return;
    
            //    event.preventDefault();
    
            //    var $field = $(event.currentTarget),
            //        $display = $field.prev("span.item-display");
    
            //    $display.html($field.find(":input:first").val());
            //    $display.show();
            //    $field.hide();
            //})
            .on("blur", "span.item-field", function (event) {
                $(event.currentTarget)
                    .hide()
                    .prev("span.item-display")
                    .show()
                    .find(":input:first")
                    .focus()
                    .select();
            })
        ;
    </script>



    Wednesday, May 27, 2020 10:45 AM

All replies

  • User-474980206 posted

    As your show and hide changes the content width, you need to fix the column sizes, so changing content width has no effect. Set the second to width to 70%. I’d then make the input 100% to fill  the td 

    Wednesday, May 27, 2020 2:34 PM
  • User1134142769 posted

    I don’t understand what you are offering.

    Could make changes to the project.
    Project - https://dotnetfiddle.net/Bryhlv

    Wednesday, May 27, 2020 7:03 PM
  • User1535942433 posted

    Hi frmasp897654,

    Accroding to your description and codes,I suggest you could use table-responsive to auto-fit the the width of columns.

    More details,you could refer to below codes:

    <style type="text/css">
    .table {
        margin: 0 auto;
        width: 100%;
    }
    .item-display {
      cursor: pointer;
    }
    
    .item-field {
      display: none;
    }
    </style>
    <div class="container table-responsive">
            <table class="table table-sm table-hover table-striped mx-auto w-auto" >
                <thead class="thead-dark" >                
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.ID)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Title)
                        </th>
                                         
                    </tr>
                </thead>
    			@foreach (HelloWorldMvcApp.SampleViewModel sVM in Model)
                {
    				<tr>
    					<td>@sVM.ID</td>
    					<td>										
    					    <span class="item-display">@Html.DisplayNameFor(model => model.Title)</span>
                            <span class="item-field">
                                <input type="text" value="@Html.DisplayNameFor(model => model.Title)" />                            
                            </span>
    					
    					</td>
    				</tr>
                }
          </table>
    </div>

    Result:

    Best regards,

    Yijing Sun

    Friday, May 29, 2020 1:39 AM
  • User1134142769 posted

    yij sun

    Hi frmasp897654,

    Accroding to your description and codes,I suggest you could use table-responsive to auto-fit the the width of columns.

    More details,you could refer to below codes:

    <style type="text/css">
    .table {
        margin: 0 auto;
        width: 100%;
    }
    .item-display {
      cursor: pointer;
    }
    
    .item-field {
      display: none;
    }
    </style>
    <div class="container table-responsive">
            <table class="table table-sm table-hover table-striped mx-auto w-auto" >
                <thead class="thead-dark" >                
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.ID)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Title)
                        </th>
                                         
                    </tr>
                </thead>
    			@foreach (HelloWorldMvcApp.SampleViewModel sVM in Model)
                {
    				<tr>
    					<td>@sVM.ID</td>
    					<td>										
    					    <span class="item-display">@Html.DisplayNameFor(model => model.Title)</span>
                            <span class="item-field">
                                <input type="text" value="@Html.DisplayNameFor(model => model.Title)" />                            
                            </span>
    					
    					</td>
    				</tr>
                }
          </table>
    </div>

    Result:

    Best regards,

    Yijing Sun

    I don’t understand what you are offering.
    I made a change.
    Example - https://dotnetfiddle.net/TIB7Gq
    Problem: if I click on a record, the table expands.
    How to fix the problem?

    Tuesday, June 2, 2020 8:50 AM
  • User1535942433 posted

    Hi frmasp897654,

    Accroding to your description,I don't understand your requirment clearly.Do you want to auto fit the width of every columns' width?Whether the previous code can meet your requirements?

    Besides,do you want to fix the column when click the column?I suggest you could set textbox's width and label padding,height.

    More details,you could refer to below codes:

    <style type="text/css">
    .table {
        margin: 0 auto;
        width: 100%;
    }
    	.table tr {
    height:40px;
    	}
    .item-display {
      cursor: pointer;
    	padding-right:9px;
    }
    
    .item-field {
      display: none;
    }
    </style>
    		<script>
                $(function(){       
                $('input').each(function(){
                var value = $(this).val();
                var size  = value.length;
                $(this).width((size)*7 + 'px');
                })
                })
            </script>
    <div class="container table-responsive">    
            <table class="table table-sm table-hover table-striped mx-auto w-auto">
                <thead class="thead-dark" >                
                    <tr >
                        <th>
                            @Html.DisplayNameFor(model => model.ID)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Title)
                        </th>
                                         
                    </tr>
                </thead>
    			@foreach (HelloWorldMvcApp.SampleViewModel sVM in Model)
                {
    				<tr >
    					<td>@sVM.ID</td>
    					<td>										
    					    <span class="item-display">@Html.DisplayFor(model => sVM.Title)</span>
                            <span class="item-field">
                                <input type="text" value="@Html.DisplayFor(model => sVM.Title)" />                            
                            </span>
    					
    					</td>
    				</tr>
                }
          </table>
    </div>

    Result:

    Best regards,

    Yijing Sun

    Thursday, June 4, 2020 2:24 AM