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?
Hi Tammy,
I have attached my sample for you to examine. I am using IgniteUI version 14.1.20141.2031. If there is a difference in our versions, this may cause the discrepencies.
I am still dicsussing this issue with my supervisor and I will update you again by Monday on this.
Ok the plot thickens on this one. I have a parent div that has a width of 99% and then any parents on top of that have a width of 100% since we are letting all of the controls fill their containers. If I change your example to have a width of 99% on the div it breaks it. Any other ideas???
Ok I kind of got this working but I noticed something. Our controls are hosted in a parent div with width 99%. I changed your sample to this and the original bug came back that caused me to try all this css in the first place. If you change your div to 99% and then shrink the browser the text you typed into the edit disappears....
Any luck talking to the developers for some ideas here?
Thanks for the update. I am able to see this issue when I set the parent div to 99%.
I am still waiting to hear back from my supervisor on this issue. I will have another update for you by tomorrow.
Yeah I think I was mistaken there. If you change it to 99% though and shrink the screen you will see the issue where the text disappears from the edit. If we could fix that then I could go back to how I originally did this if it makes more sense to go that way.
Yeah it is getting applied. I tried both scenarios so with the auto width set on the child I cannot click anywhere in the edit for it to take focus. If I remove that the issue with resize appears where the text is hidden if you resize the screen. I was going to compare with your sample to see if the elements looked the same.
Which one is not working?
I've posted all you need in your view, except the script references. Can you check if the class is correctly applied to the span element?
Thanks,
Can you post your sample? It is not working for me..
Hi Tammy Wohirabe,
Here is a possible workaround, which includes !important. But keep in mind it's not recommended to use important directives.
<style> } .editorWidth { width: 100% !important; } </style>
<div style="background-color: red; width: 90%">
@Html.Infragistics().TextEditor().ButtonType(TextEditorButtonType.Clear).Height(25).HideEnterKey(false).ID("id").NullText("null Text").SelectionOnFocus(TextEditorSelectionOnFocus.SelectAll).HtmlAttributes(new System.Collections.Generic.Dictionary<string,object>() { { "class", "editorWidth" }}).Render()
</div>
In that case the editor is placed inside div with width set to 90%, and once its resized the editor is resizing too.
Hope that helps,
I am still waiting to hear back from our developers on this.
If I do not hear from them by Monday morning I am going to follow up with them again.