검도 격자에 새 행을 추가 할 때 텍스트 공간이 맞지 않습니다.

Question

js (아래 부분 코드)를 사용하여 검도 격자에 새 행을 추가하면 텍스트가 행 내부에 맞지 않습니다 사진 : print-screen-kendo-grid.

어떻게 해결할 수 있습니까?

var dataSource = section.find(".k-grid").getKendoGrid().dataSource; 
dataSource.add({ 
     Description: description.val(), 
     StepTimer: timer 
    }); 

감사합니다.

편집 :

@(Html.Kendo().Grid<RecipeStepsViewModel>() 
.Name(gridName) 
.HtmlAttributes(new { @class = "recipe-steps-grid" }) 
    .Columns(columns => 
    { 
     columns.Template(t => { }).ClientTemplate("#= generateHandleTemplate() #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px"); 
     columns.Template(t => { }).ClientTemplate("STEP #= StepOrder #").HtmlAttributes(new { @class = "step-order-col" }).Width("50px"); 
     columns.Bound(p => p.Description).ClientTemplate("#= generateStepDescriptionTemplate(Description) #") 
      .HtmlAttributes(new { @class = "step-description-col" }).Width("100%"); 
     columns.Bound(p => p.StepTimer).ClientTemplate("#= generateTimerTemplate(StepTimer) #").HtmlAttributes(new { @class = "right-cell" }).Width("80px"); 
     columns.Template(t => { }).ClientTemplate("#= generateDeleteTemplate(" + isLocked.ToString().ToLower() + ") #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px"); 
    }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Batch(true) 
     .ServerOperation(false) 
     .Read(read => read.Action("GetRecipeSteps", "RecipeSteps", new { sectionId = Model.Item1 }).Data("getLanguage")) 
     .Create(create => create.Action("CreateRecipeStep", "RecipeSteps")) 
     .Update(update => update.Action("UpdateRecipeStep", "RecipeSteps")) 
     .Destroy(destroy => destroy.Action("DeleteRecipeStep", "RecipeSteps")) 
     .Model(model => 
     { 
      model.Id(a => a.Id); 
      model.Field(a => a.Description).Editable(true); 
      model.Field(a => a.StepTimer).Editable(true); 
     }) 
) 
    .Events(e => 
    { 
     e.Save("onStepSave"); 
     e.DataBound("onStepDatabound"); 
     e.Change("onStepRowSelection"); 
    }) 
    .Selectable(s => s.Mode(GridSelectionMode.Single)) 
    .Editable(editable => editable.Mode(GridEditMode.InCell) 
     .CreateAt(GridInsertRowPosition.Bottom)) 
      ) 

      @(Html.Kendo().Sortable() 
       .For("#" + gridName) 
       .ConnectWith(".recipe-steps-grid") 
       .Filter("table > tbody > tr:not(.k-grid-edit-row)") 
       .Handler("table > tbody .drag-handle-icon") 
       .Cursor("move") 
       .Disabled(".no-drag") 
       .HintHandler("noHint") 
       .PlaceholderHandler("placeholder") 
       .ContainerSelector(".section-container[data-type=recipe-steps]") 
       .Events(events => events.Change("onStepSort")) 
      ) 

      @{ 
       if (Model.Item3 && !Convert.ToBoolean(isLocked.ToString().ToLower())) 
       { 
        <table class="add-recipe-step"> 
         <colgroup> 
          <col class="add-colgroup" /> 
          <col class="description-colgroup" /> 
          <col class="timer-colgroup" /> 
         </colgroup> 
         <tr> 
          <td class="centered-cell"><img class="add-btn" src='@Url.Content("~/Content/Images/grey-plus-thin.png")'></td> 
          <td> 
           <input class="input-box" type="text" placeholder='@Resources.placeholderNewRecipeStep' name="description" /> 
          </td> 
          <td class="timer"> 
           @(Html.Kendo().TimePicker() 
            .Name("timer-" + guid) 
            .HtmlAttributes(new { @class = "gl-timer" }) 
            .Format("mm:ss") 
            .Interval(1) 
            .Value("00:00:00") 
            .Min("00:00:00") 
            .Max("00:59:00") 
           ) 
          </td> 
         </tr> 
        </table> 
       } 
      } 

JS : 나는 더 많은 정보 열에 대한

CSS 규칙

.recipe-steps-grid .step-description { 
    max-height: 60px; 
    overflow: hidden; 
    white-space: pre-wrap; 
    margin-top: 0; 
    margin-bottom: 0; 
    text-indent: 0; 
    text-align: left; 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    border: none; 
    background-color: inherit; 
    padding: 0; 
} 

.recipe-steps-grid .step-order-col, .recipe-steps-grid .step-description-col { 
    vertical-align: top; 
} 

.recipe-steps-grid tr.k-state-selected .step-order-col, .recipe-steps-grid tr.k-state-selected .step-description-col { 
    vertical-align: middle; 
} 

.recipe-steps-grid { 
    font-size: 13px; 
    color: #342922; 
    margin: 0 -30px; 
} 

.recipe-steps-grid .step-order-col { 
    vertical-align: top; 
    color: #9d9d9d; 
    font-size: 11px; 
} 

.recipe-steps-grid .step-order-col, 
.recipe-steps-grid .step-description-col { 
    vertical-align: top; 
} 

.recipe-steps-grid tr.k-state-selected .step-order-col, 
.recipe-steps-grid tr.k-state-selected .step-description-col { 
    vertical-align: middle; 
} 

검도 그리드를 추가

function generateStepDescriptionTemplate(text) { 
    var bold = /\*(.*?)\*/gm; 
    var html = text.replace(bold, '<span class="emph-word">$1</span>'); 

    return "<pre class='step-description'>" + html + "</pre>"; 
} 

검도 그리드 위에는 "recipe-steps-section section"이라는 div 클래스가 있습니다. 아이디어는 레시피에 단계를 추가하는 것입니다. recipe-steps-grid에는 5 개의 열이 있습니다. 첫 번째는 사용자가 순서를 변경하기 위해 단계를 끌 수 있도록 핸들입니다. 두 번째 열은 래서 피 단계 주문 번호이며, 그 다음에는 래서 피 단계 설명 (이것은 텍스트 공간을 늘리고 싶습니다)이옵니다. 다음 열은 요리법 단계가 요리하는 데 걸리는 시간입니다. 마지막 열에는이 단계를 삭제할 수있는 옵션이 있습니다.

검도 그리드에는 끝 부분에 단계 설명과 단계 시간 ("add-recipe-step"클래스)이 포함 된 새로운 단계를 추가하는 툴바가 있습니다.

Answer 1

내가 제대로 이해하면 오버 플로우 랩을 원하는 : 휴식 단어를 당신의 열

을 위해 일반적으로 당신은 당신의 페이지

td { 
    overflow-wrap: break-word; 
} 

이를 삽입 할 수 있고 단어가에 도달하면 워드가 중단됩니다 최대 폭. 원천 중 어디에서든 단어를 어기 게됩니다. 이것은 당신이 당신의 말을 어디서나 깨뜨리지 않기 때문에 당신의 예를 위해 효과적입니다.

overflow-normal은 일부 의미가있는 단어에 대해 더 잘 작동합니다. 더 많은 정보를 원하시면 this

Answer 2

해결책을 찾았습니다.

return "<pre class='step-description'>" + html + "</pre>"; 

따르면 https://www.w3schools.com/tags/tag_pre.asp 행 :. 문제 클래스 전에이 "프리"을

"태그가 정의 형식화 된 텍스트 a 요소에 텍스트 고정 폭 폰트로 표시된다 (보통 택배) 공백과 줄 바꿈을 모두 유지합니다. 요소의 텍스트는 고정 너비 글꼴 (대개 Courier)로 표시되며 공백과 줄 바꿈을 모두 유지합니다. "

그래서 나는 그것을 제거했을 때 검도 그리드에서 더 큰 행의 텍스트를 자르는 것을 멈췄다.