Inline markup blocks (@<p>Content</p>) cannot be nested. Only one level of inline markup is allowed.

1 Answer 14 Views
DropDownList PanelBar TabStrip
Somi
Top achievements
Rank 1
Somi asked on 05 Mar 2025, 11:17 AM

I have a div  tag which has all three controls within the tag

1. TabStrip as the main container

2. Panel bar inside the tab

3.Dropdown inside the panel bar.

But the code is giving me the error - Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed.

Can somebody help me to resolve  and  fix it.

Below is my code structure

        <div class="InputArea">
            @(Html.Kendo().TabStrip()
                    .Name("ScenaioNMDTabStrip")
                    .TabPosition(TabStripTabPosition.Top)
                    .Items(tabstrip =>
                    {
                     tabstrip.Add().Text("NMD")
                    .Selected(true)
                    .HtmlAttributes(new { style = "height: 55px;width: 20%;" })
                    .Content(@<text>
                    <div class="col-lg-11" style="float:left;">
                    </div>
                @(Html.Kendo().PanelBar()
                .Name("panelbar1")
                .HtmlAttributes(new { style = "width:200px;" })
                .Items(panelbar=>{
                panelbar.Add().Text("Scenario NMD")
                .Content(@<text>
                    @(Html.Kendo().DropDownList()
                    .Name("EmpyreanVersion")
                    .DataTextField("VersionId")
                    .DataValueField("VersionId")
                    .HtmlAttributes(new { style = "width: 150px;" })
                    )
                </text>);
                })
                
                )
            </text>);
              tabstrip.Add().Text("Empyrean");
                    })
                )
        </div>

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 10 Mar 2025, 07:07 AM

Hello Somi,

Thank you for the code snippet and the details provided.

The issue is caused by the nested @<text> blocks. This is not a Telerik UI issue. Razor only allows one level of inline markup, so you need to restructure the code to avoid nesting @<text> inside another @<text>.

In order to achieve the desired behavior, I would recommend moving the nested components outside the @<text> block and use Content with a separate variable for better readability and to avoid Razor's inline markup nesting restriction.

 

Kind Regards,
Anton Mironov
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

Tags
DropDownList PanelBar TabStrip
Asked by
Somi
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or