Question

在以下网站上：http://www.jgdoherty.org/当＆＃34;编辑＆＃34;单击（填充行需要几秒钟），单元格将被填充。我想删除此效果或至少减少填充。我假设它是一个引导它的引导类（页面有一个指向bootstrap.css的链接）所以我需要修改bootstrap.css来修复它，但我一直无法找到创建填充的代码行。在页面中创建表的html如下：

      <table class="table table-bordered table-hover" style="width:800px">
    <tr>
        <th>#</th>
        <td>FirstName</td>
        <th>LastName</th>
        <th>Address</th>
        <th>City</th>
        <th>PostalCode</th>
        <th>Country</th>
        <th>Notes</th>
    </tr><tr data-ng-repeat="hotel in hotels">
        <td><strong data-ng-hide="hotel.editMode">{{ hotel.FriendId }}</strong></td>
        <td>
            <p data-ng-hide="hotel.editMode">{{ hotel.FirstName }}</p>
            <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.FirstName" />
        </td>
        <td>
            <p data-ng-hide="hotel.editMode">{{ hotel.LastName }}</p>
            <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.LastName" />
        </td>
        <td>
            <p data-ng-hide="hotel.editMode">{{ hotel.Address }}</p>
            <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Address" />
        </td>
        <td>
            <p data-ng-hide="hotel.editMode">{{ hotel.City }}</p>
            <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.City" />
        </td>
        <td>
            <p data-ng-hide="hotel.editMode">{{ hotel.PostalCode }}</p>
            <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.PostalCode" />
        </td>
        <td>
            <p data-ng-hide="hotel.editMode">{{ hotel.Country }}</p>
            <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Country" />
        </td>
        <td>
            <p data-ng-hide="hotel.editMode">{{ hotel.Notes }}</p>
            <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Notes" />
        </td>
        <td>
            <p data-ng-hide="hotel.editMode"><a data-ng-click="toggleEdit(hotel)" href="javascript:;">Edit</a> | <a data-ng-click="deletefriend(hotel)" href="javascript:;">Delete</a></p>
            <p data-ng-show="hotel.editMode"><a data-ng-click="save(hotel)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(hotel)" href="javascript:;">Cancel</a></p>
        </td>
    </tr>
</table>

非常感谢任何帮助

Answer 1

我认为bootstrap没有添加任何内容。在您编辑时，会显示您的input字段。它们在height和width中比您的<p>更大。这意味着它会自动扩展。 <td>也有8px的填充。

Answer 2

你可以试试这个：

[JsonProperty(PropertyName = "name")]

Answer 3

感谢Goivanni。他的答案有所帮助这有效：将一个类添加到＆＃34;输入＆＃34;像这样的HTML对象

<input class="width_60" />

课程在

之下

.width_60
{
 width: 60px; 
}

以下代码也可以满足我的需求。您必须将它放在控制器方法中，如您所见。我添加了＆＃34; $ element ＆＃34;括号中的参数以及＆＃34; $ element.parent（）。find（＆＃39;输入＆＃39;）。css（＆＃39; width＆＃39;，＆＃39 ; 60px＆＃39;）; ＆＃34;到功能体。

 function hotelController($scope, Hotel, $element) { 
        $scope.loading = true;
        $scope.addMode = false;
        $scope.hotels = Hotel.query();
        $scope.loading = false;
        $scope.toggleEdit = function (hotel) {
            id = hotel.HotelId;
            $element.parent().find('input').css('width', '60px');   


        this.hotel.editMode = !this.hotel.editMode;
    };

AngularJS编辑模式css

3 个答案: