How to get a column of a grid to reduce the field instead of seeing the right part of this stop seeing the left

Question

How to get a column of a grid to reduce the field instead of seeing the right part of this stop seeing the left

Navigation

#1 by (0 votes)

0

In the grid the Template field Currently to see the name of the entire template you have to do the long field until the name enters to see the end of the template name. The end of the template name is what differentiates the template from the rest of the templates on the route

By reducing the field instead of leaving the right part of the field, you can not see the left part.

What property should I add to get the result of the second image?

The current code is as follows

column = grid.RootTable.Columns.Add();
        column.AllowRemove = InheritableBoolean.True;
        column.Caption = "Plantilla";
        column.EditType = EditType.TextBox;
        column.DataMember = "ShortName";
        column.Key = column.DataMember;
        column.TextAlignment = TextAlignment.Center;
        column.Visible = false;
        column.Width = 100;
        column.ButtonStyle = ButtonStyle.ButtonCell;
        column.HeaderToolTip = "Plantilla asociada a una regla que actúa en ese vuelo/fecha";
        column.CellToolTip = CellToolTip.NoToolTip;

html5 c# webforms

asked by AlexisRS 13.02.2018 в 09:51

source

1 answer

Deserialize byte [] in System.Collections.Hashtable Error in reverse arrangement

score 0 · Answer 1

With css you can do it putting the content in a div with a minimum width of 100% of the cell and aligned to the right ( float: right ) so that when it grows because the content does not fit grow to the left.

Look at this example. As you type text in the input , the contents of the cell are updated. When it does not fit the div grows to the left so the content that is hidden is the beginning.

$(function(){
  $('#input').keyup(function(){
    $('#content').text($(this).val());
  });
});

td{
  width: 150px;
  max-width: 150px;
  height: 20px;
  border: solid 1px gray;
  overflow: hidden;
  white-space: nowrap;
}
td div{
  float: right;
  display: inline-block;
  min-width: 100%;
  height: 15px;
  max-height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div id="content"></div></td>
  </tr>
</table>

<input id="input" type="text" />