responsive-modes-stack.json

{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"e-tab-section\">\n<div class=\"col-lg-8 control-section\">\n    <div class=\"e-sample-resize-container\">\n        <div id=\"tab_adaptive\">\n        </div>\n    </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n    <table id=\"property\" title=\"Properties\" style=\"width: 100%;\">\n        <tbody>\n            <tr>\n                <td style=\"width: 50%;\">\n                    <div>Mode</div>\n                </td>\n                <td style=\"width: 50%; padding-right: 10px;\">\n                    <div>\n                        <select id=\"adaptive\" class=\"form-control\">\n                            <option value=\"scrollable\">Scrollable</option>\n                            <option value=\"popup\">Popup</option>\n                        </select>\n                    </div>\n                </td>\n            </tr>\n            <tr>\n                <td style=\"width: 50%;\">\n                    <div>Header Placement</div>\n                </td>\n                <td style=\"width: 50%;\">\n                    <div>\n                        <select id=\"orientation\" class=\"form-control\">\n                            <option value=\"Top\">Top</option>\n                            <option value=\"Bottom\">Bottom</option>\n                            <option value=\"Left\">Left</option>\n                            <option value=\"Right\">Right</option>\n                        </select>\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n</div>\n\n\n<style>\n    .e-content .e-item {\n        font-size: 12px;\n        padding: 10px;\n        text-align: justify;\n    }\n    .container {\n        min-width: 350px;\n        max-width: 500px;\n    }\n\n    #tab_adaptive .e-tab-text {\n        display: inherit;\n    }\n    @media screen and (max-width: 481px) {\n        .control-section.e-tab-section,\n        .container-fluid {\n            padding-left: 0;\n            padding-right: 0;\n        }\n    }\n\n    @media screen and (max-width: 425px) {\n        #tab_adaptive {\n            overflow: hidden;\n        }\n\n         #tab_adaptive .e-content {\n            height: inherit !important;\n        }\n\n        #tab_adaptive .e-item.e-active {\n            overflow: scroll;\n        }\n    }\n</style></div></body></html>","index.js":"{{ripple}}/**\n *  Tab adaptive sample\n */\n\n    //Initialize Tab component\n     var tabObj = new ej.navigations.Tab({\n          heightAdjustMode: 'None',\n          height: 250,\n          items: [\n            {\n                header: { 'text': 'HTML' },\n                content: 'HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web ' +\n                'pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually ' +\n                'engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web ' +\n                'browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a ' +\n                'website semantically along with cues for presentation, making it a markup language, rather than a programming language.'\n            },\n            {\n                header: { 'text': 'C Sharp(C#)' },\n                content: 'C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development ' +\n                'team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.'\n            },\n            {\n                header: { 'text': 'Java' },\n                content: 'Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle ' +\n                'Corporation, that provides a system for developing application software and deploying it in a cross-platform computing ' +\n                'environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to ' +\n                'enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to ' +\n                'provide many features of native applications and can be embedded in HTML pages.'\n            },\n            {\n                header: { 'text': 'VB.Net' },\n                content: 'The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also ' +\n                'includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.'\n            },\n            {\n                header: { 'text': 'Xamarin' },\n                content: 'Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers that ' +\n                'created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language ' +\n                'Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, ' +\n                'developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share ' +\n                'code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World ' +\n                'as of May 2015.'\n            },\n            {\n                header: { 'text': 'ASP.NET' },\n                content: 'ASP.NET is an open-source server-side web application framework designed for web development to produce ' +\n                'dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ' +\n                'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +\n                'to Microsoft\\'\\s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +\n                'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +\n                'ASP.NET components to process SOAP messages.'\n            },\n            {\n                header: { 'text': 'ASP.NET MVC' },\n                content: 'The ASP.NET MVC is a web application framework developed by Microsoft, which implements the ' +\n                'model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ' +\n                'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +\n                'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.'\n            },\n            {\n                header: { 'text': 'JavaScript' },\n                content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of ' +\n                'web browsers so that client-side scripts could interact with the user, control the browser, communicate ' +\n                'asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in ' +\n                'both game development and the creation of desktop applications.'\n            }\n        ]\n    });\n    //Render initialized Tab component\n    tabObj.appendTo('#tab_adaptive');\n\n    //Initialize DropDownList component\n    var overflowModes = new ej.dropdowns.DropDownList({\n        width: '100%',\n        change: changeOverFlowMode\n    });\n    //Render initialized DropDownList component\n    overflowModes.appendTo('#adaptive');\n\n    var headerPositions = new ej.dropdowns.DropDownList({\n        width: '90%',\n        change: changeHeaderPosition\n    });\n    //Render initialized DropDownList component\n    headerPositions.appendTo('#orientation');\n\n    function changeOverFlowMode(args) {\n        if (args.itemData.value === 'scrollable') {\n            tabObj.overflowMode = 'Scrollable';\n        } else {\n            tabObj.overflowMode = 'Popup';\n        }\n        tabObj.dataBind();\n    }\n\n    function changeHeaderPosition(args) {\n        tabObj.headerPlacement = args.itemData.value;\n        tabObj.dataBind();\n    }\n"}