[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!

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!

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

Hi cslocus,

Can you post what you have working so far? Please post inside of [CODE] tags.

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):

Code:

---


        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

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.

No problem :)

I understand that there's no ResponsiveConfig in my code - I can't work out how to translate it and was hoping that you guys could provide some assistance :) I got as far as giving it one, but I can't get the rules to work.

Please let me know the easiest approach to giving my code ResponsiveConfigs (in razor syntax)

EDIT: After re-reading your post I realised I never answered correctly - I want to turn my tabpanel at the top into a sort of drop-down menu :)

Hello again, @cslocus!

We "ported" the Responsive example to the MVC Examples Explorer. Please take a look on it and I'm sure you'll figure the overall syntax of the Responsive feature under Razor syntax.

- Miscellaneous > Responsive > Basic in MVC Examples Explorer.
If you still is stuck after reviewing the ported example, please post the code like you did above, introducing the usage of the Responsive settings.

Hope this helps!

Great!! Thank you so much :)

I'll let you know if I experience any difficulties - please mark this as resolved :D

Thanks for the feedback, hope it helps you get that working on your project!