EditForm CSS adding garbage to grid

[Tony]

Greetings!

I'm having an issue with a RadGrid using an EditFormTemplate; whenever I click my edit button on an item of this rad grid, the item goes into edit mode fine and my controls appear below them item. However, when the CSS for the row being in edit mode gets applied, it adds some peculiar artifacts to my grid. I get a blue line about 15 lines of text from the top of the item being edited. It's worth pointing out that the varchars being exposed by this grid are very large, which might have something to do with the issue; it only occurs when modifying an exceptionally long list of codes.

Please find attached screenshots of the problem behavior.

Screenshots include a before and after [edit button clicked] of the item in question, and the behavior exhibited.

It sort of hangs there, strangely in the middle of the original radgrid item. These elements don't appear to be actual controls; they seem to be part of a repeating background being applied by the CSS for an edit form item.

Here's my markup for the grid in question:

<telerik:RadGrid ID="rgCrosswalkView" AutoGenerateColumns="false" runat="server">
    <MasterTableView DataKeyNames="CrosswalkID, CrosswalkGroupID, CPTs, ICDs">
        <CommandItemTemplate>
            <div class="row">
                <div class="col-sm-12">
                    <asp:LinkButton runat="server" ID="btAddCrosswalkGroup" CssClass="btn btn-sm btn-primary" CommandName="InitInsert" Style="color: white;">
                        <i class="glyphicon glyphicon-plus-sign"></i>Add Crosswalk Group
                    </asp:LinkButton>
                </div>
            </div>
        </CommandItemTemplate>
        <Columns>
            <telerik:GridBoundColumn HeaderText="CPTs" DataField="CPTs" ItemStyle-VerticalAlign="Top" HeaderStyle-Width="25%"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="ICDs" DataField="ICDs" ItemStyle-VerticalAlign="Top" HeaderStyle-Width="55%"></telerik:GridBoundColumn>
            <telerik:GridCheckBoxColumn ReadOnly="true" HeaderText="ICD10?" DataField="IsICD10" ItemStyle-VerticalAlign="Top"></telerik:GridCheckBoxColumn>
            <telerik:GridTemplateColumn ItemStyle-VerticalAlign="Top">
                <ItemTemplate>
                    <asp:LinkButton runat="server" ID="btEditCrosswalkPairs" CommandName="Edit">
                        <i class="glyphicon glyphicon-pencil"></i>
                    </asp:LinkButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn ItemStyle-VerticalAlign="Top">
                <ItemTemplate>
                    <asp:LinkButton ID="btRemoveCrosswalkPairs" runat="server" CommandName="Delete" OnClientClick="return confirm('Really delete this crosswalk group?');" CssClass="btn btn-sm btn-default"><i class="glyphicon glyphicon-remove-circle"></i></asp:LinkButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <div class="row">
                    <div class="col-sm-3">
                        CPTs:<asp:Textbox ID="tbCPT" runat="server" TextMode="MultiLine" Rows="20" style="resize: none;" Width="100%"></asp:Textbox><br />
                    </div>
                    <div class="col-sm-9">
                        ICDs:<asp:TextBox ID="tbICD" runat="server" TextMode="MultiLine" Rows="20" style="resize: none;" Width="100%"></asp:TextBox><br />
                        <asp:CheckBox ID="cbICD10" runat="server" Checked="true" Text="ICD10?" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2">
                        <asp:LinkButton CssClass="btn btn-xs btn-primary" ID="btUpdateGroup" CommandName="Update" runat="server" Text="Update"></asp:LinkButton>
                        <asp:LinkButton CssClass="btn btn-xs btn-primary" ID="btInsertGroup" CommandName="PerformInsert" runat="server" Text="Insert"></asp:LinkButton>
                    </div>
                    <div class="col-sm-2">
                        <asp:LinkButton CssClass="btn btn-xs btn-default" ID="btCancelGroup" CommandName="Cancel" runat="server" Text="Cancel"></asp:LinkButton>
                    </div>
                    <div class="col-sm-8">

                    </div>
                </div>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

And here is the CSS which appears to be giving me trouble, pulled from dev console. The offending line is commented out. Disabling that attribute makes the coloration of the edit form item go back to default, but removes the garbage repeating x.

.rgEditRow {
    /* background: rgba(205,205,205,0.75) 0 -4900px repeat-x url('WebResource.axd?d=ifcjPV8aj2vMt9az-6wWmwZqcD65tft-V-aE6ooNIutn9jwr_s82sxYh…9mFxF_3cAUoYtM8o9U5-M7wLDeK47M_h5TDjLXEugyZbr0sNXz01&t=635932205533629626'); */
    color: #000;
}

I can probably override it by "cancelling" the class in some way, but would honestly prefer it perform the coloration as it intends to, without the garbage.

Any assistance would be appreciated.

[Kostadin]

Hi Tony,

Thank you for contacting us.

I am afraid I was unable to replicate the issue by using the provided code on my side. I attached the sample to this thread so could you please give it a try and let me know about the result. I would appreciate if you can replicate the issue either in my sample or in a small runnable one in order to examine it locally. Additionally if you can send a live url to the page where the issue is observed we can inspect the rendered element and provide you with a proper solution.

I am looking forward to your reply.

Regards,
Kostadin
Telerik