[CLOSED] Responsive design in mvc.ext.net 5

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Responsive design in mvc.ext.net 5

    Is it possible to introduce responsive design into my mvc.ext.net 5 webpage?

    There are examples on examples.ext.net but not the MVC alternative.

    Please let me know!
    Last edited by fabricio.murta; Oct 24, 2019 at 5:47 PM.
  2. #2
    Hello @cslocus!

    There is! The same you can do in Webforms you can in MVC versions. Although the syntax changes from ASPX to Razor, and some aspects also change even in code behind (basically getting reference to page components), the structure remains the same. If you compare two existing examples common in both Examples Explorers, you'll understand what I mean.

    A good sample on that is the Simple Grid Panel example:
    - WebForms
    - MVC

    To get started with responsive design in MVC, you should start with an example using a ViewPort. This MVC example is a good starting point:
    - Viewport > Built as Builder

    Its equivalent in Webforms would be:
    - Viewport > Basic > Built in Markup

    Usually we write the same example in MVC and WebForms when there's substantial change, or to highlight a major feature. So we don't have some examples in MVC.

    Let us know if you are still having trouble in "translating" the Responsive Design WebForms Example to your MVC project (in Razor or C# controller syntax), and we'll take a look, it may be a specific need you have that needs special handling. There may also be some configs that are not trivial to be set via the responsive rules, so it would be nice to see how exactly you're trying to port it.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Thanks!

    Hi! Thanks for getting back to me, some of your examples are very helpful.

    Could you give me an example in Razor?

    I'm hoping to have a page that has a navigation bar at the top (Home, contact, search etc) that when the width of the screen is small enough, it will change to a menu instead :)

    Please let me know if that is possible!

    Thanks
  4. #4
    Hi cslocus,

    Can you post what you have working so far? Please post inside of [CODE] tags.
    Geoffrey McGill
    Founder & CEO
  5. #5
    Hi Geoffrey,

    Here's what I've got in my view so far (The CSS is also there, but for the purpose of the question, I didn't include it in this example):

    
            Html.X().Viewport()
            .Layout(LayoutType.Border)
            .Items(
    
                Html.X().Panel()
                .Region(Region.North)
                .Header(false)
                .Shadow(true)
                .Border(false)
                .Frame(false)
                .Layout(LayoutType.HBox)
                .Items(
    
                    Html.X().Image()
                    .ID("TopLogo")
                    .ImageUrl(@"~/Images/TopLogo.png")
                    .Cls("rounded-corners")
                    .Width(130)
                    .Height(90)
                    .Margin(15),
    
                    Html.X().TabPanel()
                    .Layout(LayoutType.HBox)
                    .Cls("rounded-corners")
                    .MarginSpec("35, 10, 35, 10")
                    .Flex(1)
                    .Items(
    
                        Html.X().Panel()
                        .Title("Example")
                        .Flex(1),
    
                        Html.X().Panel()                    
                        .Title("Example")                    
                        .Flex(1),
    
                        Html.X().Panel()                    
                        .Title("Example")
                        .Flex(1),
    
                        Html.X().Panel()
                        .Title("Example")
                        .Flex(1),
    
                        Html.X().Panel()
                        .Title("Example")
                        .Flex(1)
    
                    )
                )
            )
    One other thing - when I create a new TabConfig (I believe it's button), I can't change the CSS of the text. Can you give me an example of how to do this?

    Thanks

    EDIT: Changing code in the tags
  6. #6
    Thanks for providing the code sample. What responsive changes to the interface would you like to see occur?

    In Fabricio's response above he linked to a sample demonstrating a ResponsiveConfig, but I don't see any ResponsiveConfig defined in your code sample.
    Geoffrey McGill
    Founder & CEO

Similar Threads

  1. Replies: 2
    Last Post: Jul 14, 2017, 5:41 PM
  2. Responsive design in ext.net 2.5
    By Yaganteeswarudu in forum Mobile Help
    Replies: 1
    Last Post: May 25, 2017, 2:38 PM
  3. Responsive extensions & bug fixes (Ext.NET Mobile 4.1.0)
    By unicorn64 in forum User Extensions and Plugins
    Replies: 0
    Last Post: Apr 06, 2017, 7:47 AM
  4. Responsive Web form with ext net
    By developerpr in forum 2.x Help
    Replies: 3
    Last Post: Dec 10, 2015, 2:12 PM
  5. Replies: 9
    Last Post: Mar 04, 2015, 8:59 PM

Posting Permissions