Telerik UI for ASP.NET Core Responsive Panel Overview

Loading Demo...

EXAMPLE

VIEW SOURCE

Also available for:

CLIENT-SIDE API HTML HELPER API

Resize the page to see how the responsive panel hides content.

News

Jan 22, 2014 Stanford Speaker Series Looks at the Rising Tide of Eastern European High Tech Firms with Telerik CEO Vassil Terziev

Dec 10, 2013 Telerik Test Studio Now Offers Cross-Browser Test Recording and Subscription-Based Pricing for 1M-Strong Developer Community

Nov 22, 2013 Telerik AD is Named "Best Employer in Bulgaria" for Sixth Consecutive Year

Nov 20, 2013 Telerik Embraces the Responsive Web with Latest Kendo UI Improvements

Blogs

Upgrading OpenAccess ORM to Telerik Data Access

Friday, February 14, 2014 by Data Access Team

OpenAccess ORM was recently renamed to Telerik Data Access and re-branded. Find out what are the changes you can expect when upgrading to the latest official release.

Design, then Develop Experiences

Friday, February 14, 2014 by Telerik Services

Here at Telerik, our goal is to help you develop experiences. We've got a long history of providing tools to help developers deliver great value for their customers. But maybe sometimes you need a little help figuring out just how to make your customers happy. That's where the user experience (UX) designers at Telerik Services come in.

What Carl Sagan Taught Me About Software

Thursday, February 13, 2014 by Kendo UI

Software ecosystems are vital to a developer's success. It's hard to place a value on the benefit derived from being able to lean on other's experience, as well as easily find and digest content that's relevant to your project. Ecosystems don't just sprout up overnight though. It takes the right timing, the perfect conditions and lots of love and cultivation. Trying to actively create a new ecosystem around a product or platform is a lot like terraforming. Carl Sagan knows a thing or two about that.

#example { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .dash-head { max-width: 970px; height: 80px; background-color: #222; position: relative; } .dash-head .k-rpanel-toggle { position: absolute; width: 40px; height: 40px; top: 20px; left: 20px; } .panel-wrap { max-width: 968px; background-color: #f5f5f5; border: 1px solid #e5e5e5; position: relative; } #sidebar { margin: 0; padding: 20px 0 20px 20px; vertical-align: top; } @media (max-width: 1000px) { #sidebar { background: #fff; padding: 20px; border-left: 1px solid #e5e5e5; /* show sidebar in container, demo only*/ position: absolute; top: 0; bottom: 0; } #sidebar.k-rpanel-expanded { box-shadow: 0 0 10px rgba(0,0,0,.3); } } #main-content { overflow: hidden; margin: 0; padding: 20px; min-height: 580px; vertical-align: top; } /* WIDGETS */ .widget { margin: 0 0 20px; padding: 0; background-color: #ffffff; border: 1px solid #e7e7e7; border-radius: 3px; } .widget div { padding: 10px; min-height: 50px; } .widget h3 { font-size: 12px; padding: 8px 10px; text-transform: uppercase; border-bottom: 1px solid #e7e7e7; } .widget h3 span { float: right; } .widget h3 span:hover { cursor: pointer; background-color: #e7e7e7; border-radius: 20px; } /* PROFILE */ .profile-photo { width: 80px; height: 80px; margin: 10px auto; border-radius: 100px; border: 1px solid #e7e7e7; background: url(/aspnet-core/shared/web/Customers/ISLAT.jpg) no-repeat 50% 50%; } #profile div { text-align: center; } #profile h4 { width: auto; margin: 0 0 5px; font-size: 1.2em; color: #1f97f7; } #profile p { margin: 0 0 10px; } /* BLOGS & NEWS */ #blogs div, #news div { padding: 0 20px 20px; } #teammates h4, #blogs h4, #news h4 { width: auto; margin: 20px 0 2px; font-size: 1.4em; color: #1f97f7; font-weight: normal; } .blog-info { margin: 0 0 10px; font-size: .9em; color: #787878; } #sidebar #blogs h4 { font-size: 1em; } #sidebar #blogs p { display: none; } #sidebar #blogs .blog-info { display: block; } #main-content #news h4 { font-size: 1.2em; line-height: 1.4em; } #main-content #news h4 span { display: block; float: left; width: 100px; color: #000; padding-right: 10px; } #sidebar #news h4 { font-size: 1em; } #sidebar #news h4 span { display: block; margin-bottom: 3px; color: #000; } /* TEAMMATES */ .team-mate:after { content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden; } #teammates .team-mate h4 { font-size: 1.4em; font-weight: normal; margin-top: 12px; } .team-mate p { margin: 0; } .team-mate img { float: left; margin: 0 15px 0 0; border: 1px solid #e7e7e7; border-radius: 60px; }

The Responsive Panel component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Description

The Telerik UI for ASP.NET Core ResponsivePanel allows you to customize the way page content is displayed depending on the screen size.

In this demo, you can see the ResponsivePanel in a basic scenario where the sidebar will be hidden on small screens.

The ASP.NET Core ResponsivePanel control is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 120+ components for building modern and feature-rich web applications. The ResponsivePanel is a server-side wrapper for the Kendo UI for jQuery ResponsivePanel component and supports an HtmlHelper and a TagHelper mode.

Additional Apps

This Responsive Panel example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Telerik UI for ASP.NET Core Responsive Panel Overview

Description

Additional Apps

Support & Learning Resources

Additional Resources