Невозможно сделать ширину больше 200px

Question

У меня есть текстовое поле и текстовое поле, которое я хочу увеличить ширину. Я не могу сделать ширину больше, чем по умолчанию, но я могу сделать ее меньше. По умолчанию ширина составляет около 200px

Вот код для управления:

@foreach (var item in Model) 
{ 
    <tr> 
     ... 
     <td> 
      @Html.DisplayFor(modelItem => item.NoteTextViewModels.First().ContextIdentifier, new { @class = "timeAndNote" }) 
     </td> 
... 

И CSS:

.timeAndNote{ 
     width: 500px; 
    } 

Я использую диалоговое окно JQuery, чтобы показать данные:

<div id="noteDialogDiv" style="display: none;"></div> 

И функция JS:

function showDetailedImage(divId, dialogTitle) { 
var target = '#' + divId; 
$(target).attr("title", dialogTitle); 

var dialog = $(target).dialog({ 
     show: "clip", 
     hide: "clip", 
     height: $(window).height()/3, 
     width: $(window).width()/3 , 
     title: dialogTitle, 
     modal:true, 
     buttons: { 
      Ok: function() { 
       $(this).dialog("close"); 
      } 
     } 
}); 
dialog.dialog('open'); 

}

Есть ли что-то я не знаю, что не позволяет пользователь encreasing ширины на некоторых элементах управления в некоторых случаях жизни?

Я добавил изображение, где есть 2 стрелки, указывающие на элементы управления, которые я хочу сделать шире:

Answer 1

Если бы я должен был догадаться, я бы сказал, что максимальная ширина фактически 280px. Я могу предположить, что, так как файл site.css, созданный шаблоном по умолчанию проекта MVC имеет следующее определение стиля:

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

Удалить это, и вы должны быть хорошо. Тот, кто сделал шаблон шаблона для MVC 5, стал ленивым и сделал ярлык, чтобы формы по умолчанию выглядели хорошо, вместо того, чтобы фактически использовать сетку Bootstrap, как вы предполагали.

Answer 2

Как упоминает Крис Пратт, проблема в том, что на элементах управления имеется максимальная ширина. Я попробовал добавить: max-width: 600px, затем он сработал.

Большое спасибо за всех ваших парней. И спасибо Chris