Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • kapil 21 posts 114 karma points
    Aug 12, 2019 @ 21:16
    kapil
    0

    Umbraco forms themes

    I am using Umbraco forms, when creating the questions i have used the 3 column layout , however when the form is rendered in the .cshtml file all the fields are shown one below the other (horizontally stacked).

    @Umbraco.RenderMacro("renderUmbracoForm", new {FormGuid="e0a717c8-0f6b-42c6-b61a-3378de52b0cb", FormTheme="", ExcludeScripts="0"})

    The bootstrap 2 or 3 column layouts are not appearing to work correctly. Also tried setting the FormTheme property to 'bootstrap3-horizontal' but this still does not work. Let me know if missing anything. Do i need to use any custom theme form for this to appearenter image description here

  • Shaishav Karnani from digitallymedia.com 330 posts 1562 karma points
    Aug 13, 2019 @ 06:34
    Shaishav Karnani from digitallymedia.com
    1

    Hi Kapil,

    Here is the code for Form \Views\Partials\Forms\Themes\bootstrap3-horizontal\Form.cshtml

    You can debug this file to see the issue and try chrome inspect to see if css is applied.

    It seems bootstrap css version is not matching on the master. Once you add it this issue should be fixed.

    Let me know if you need further assistance.

  • kapil 21 posts 114 karma points
    Aug 14, 2019 @ 02:53
    kapil
    0

    Hi,

    Thanks for your reply. I did check in chrome the bootstrap.css is applied however the 2 column or 3 column layout was still not appearing in my final umbraco form. To start clean, I created a new Umbraco project and created a sample Umbraco form with a 3 column design and then used with a clean master file with required bootstrap css, however this still does not render 3 column layout . Here is my master.cshtml file

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Master</title>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-grid.css" rel="stylesheet" />
    </head>
    <body>
        @RenderBody()
    
    
    <script src="~/Scripts/bootstrap.min.js"></script>
    
    
    
    
    <script src="~/Scripts/popper-utils.js"></script>
    
    
    
    
    <script src="~/Scripts/popper.min.js"></script>
    
    
    
        <!--Forms Dependency -->
    
    
    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    
    
    
    
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
    
    
    
    
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
    
    
    
    </body>
    </html>
    

    Here is 3 column layout form created in Umbraco

    Umbraco Sample form

    Here is the template where the using Macro the form was inserted

     @inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.SampleForm>
        @using ContentModels = Umbraco.Web.PublishedModels;
        @{
            Layout = "master.cshtml";
        }
    
        @Model.Value("SampleFormHeader")
    
    <!-- Also tried setting bootstrap3-horizontal value in the FormTheme property -->
    
        @Umbraco.RenderMacro("renderUmbracoForm", new {FormGuid="9e021406-de89-4777-b76c-d4a00aa3e68d", FormTheme="", ExcludeScripts="0"})
    

    However when view the final content this is how it displays without any 3 column layout

    After running the content page

    Also set bootstrap3-horizontal in the FormTheme property but no effect. Let me know if i am missing anything

  • Shaishav Karnani from digitallymedia.com 330 posts 1562 karma points
    Aug 14, 2019 @ 03:19
    Shaishav Karnani from digitallymedia.com
    0

    Hi Kapil,

    It looks good. Please can you send you solution/database zip via wetransfer and I will take a look. Email: shaishav@digitallymedia.com

  • kapil 21 posts 114 karma points
    Aug 21, 2019 @ 14:26
    kapil
    0

    It found the solution. thanks for your time

Please Sign in or register to post replies

Write your reply to:

Draft