We are setting a editor to be 100% width via css due to the known issue below. Which works but the "edit field" does not get 100% width and therefore you can only touch a portion of the control to get it to focus. When you set the 2nd line to 100% then when you type in the field the text does not appear on the screen. Since we are using the ASP.NET MVC wrappers to build the control it is being wrapped in a span. What is the best way to get this control to function properly with 100% width via css since you cannot pass "100%" to the width property of the MVC Wrapper??
.ui-ig-edit {width: 100% !important; height:25px;}
.ui-ig-edit > .ui-igedit-field {width: auto !important; text-align:left !important;}
This is from the known issues:
Width and height options can be set only absolutely (in pixels) under certain conditions
If the editor’s base element is not an <input> or <textarea> element and buttons, theme, or renderInContainer options are enabled, then the width and height options can be set only absolutely (in pixels).
Workaround
Hi Tammy Wohlrabe,
Could you please let me know what version of IgniteUI you are using here? Could you also please provide a sample of the TextEditor's code you are using? I'm testing with Infragistics.Web.Mvc.dll 4.14.1.2031 and the editor is not being rendered inside a span. I am able to get the input to expand to 100% width of its container in my sample.
One thing I noticed in the CSS you provided was that you are using ".ui-ig-edit". I am assuming this is a class on the span you are seeing and in my sample, I only see ".ui-igedit". Please make sure you are also referencing the correct class here. Here is the following code I am using:
<style type="text/css"> .ui-igedit {width: 100% !important; height:25px;} </style> </head> <body> <div style="width: 900px"> @(Html.Infragistics().TextEditorFor(m => m.ProductName) .NullText("Enter Value") .Render() ) </div> </body>
Looking forward to hearing from you.
Michael,
Were you able to reproduce this after my post yesterday?
One more thing looks like it gets wrapped in the span when the clear button is turned on. Did you try that?
bool IEditorModel.IsSpan
{
get
return this.RenderInContainer == true || (this.ButtonType != null && this.ButtonType != TextEditorButtonType.None);
}
#endregion // IEditorModel Members
We are using the HtmlHelperExtension to build the editor. It looks like the span can get wrapped in the Infragistics EditorRenderer class's Rendor method.
// build text editor
MvcHtmlString editorHtml = HtmlHelperExtensions.Infragistics(this.Helper)
.TextEditor()
.ButtonType(TextEditorButtonType.Clear)
.Height(25)
.HideEnterKey(false)
.HtmlAttributes(customHtmlAttributes)
.ID(screenControl.ControlName)
.NullText(this.Helper.GetNullTextValue(screenControl))
.SelectionOnFocus(TextEditorSelectionOnFocus.SelectAll)
.TextMode(this.GetTextMode(attributes))
.Render();