Copied to clipboard

Flag this post as spam?

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


  • David 27 posts 127 karma points
    Apr 26, 2019 @ 10:20
    David
    0

    Changing the CSS through a switch case statement

    Hi all,

    I've created a responsive image holder as a grid editor, I'm wondering how to change the colour of a border of an element by having the user select a colour from a dropdown. This would be one of the properties of the grid editor when adding it into a piece of content.

    I thought that I could do this by using a switch case statement but I'm not too sure how to implement this and how to link it up with the dropdown.

    Does anybody have any suggestions?

    Thanks,

    David

  • Carlos Gomes 38 posts 184 karma points
    Apr 26, 2019 @ 11:10
    Carlos Gomes
    100

    Hi David,

    I would suggest not using a switch case. Instead of having a drop-down property, why don't use the Approved Color property? Then, in your View, you can do something like that:

    var borderColor = Model.Content.GetPropertyValue("propertyAlias");

    img style="@(!string.IsNullOrWhiteSpace(borderColor) ? "border-color: #" + borderColor : "" )"

    That way, even if you add more color to that property, this will always work. With a switch case statement, you would need to updated the code every time a new color is added to the drop-down.

    Thanks,

  • David 27 posts 127 karma points
    Apr 26, 2019 @ 13:16
    David
    0

    Hi Carlos,

    Thank you very much for your reply and suggestion, I never knew about this property before!

    Would you have any idea what I'm doing wrong here? I'm getting an error that borderColor does not exist int he current context when I add the image holder to a piece of content and load it in the browser:

    @inherits UmbracoViewPage<Lecoati.LeBlender.Extension.Models.LeBlenderModel>
    
    
    
    <script>    
        var borderColor = Model.Content.GetPropertyValue("approvedColour");
        img style="@(!string.IsNullOrWhiteSpace(borderColor) ? "border-color: #" + borderColor : "" )"
    </script>
    
    
    
    @if (Model.Items.Any())
    {
        var item = Model.Items.ElementAt(0);
    
        var imageList = item.GetValue<string>("circularResponsiveImage");
    
    
        if (!string.IsNullOrWhiteSpace(imageList))
        {
            var imgList = imageList.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
            var imgListCollection = Umbraco.TypedMedia(imgList);
            if (imgListCollection != null)
            {
                foreach (var img in imgListCollection)
                {
    
                    <img style = "padding: 0px;" src="@img.Url" alt="@img.GetPropertyValue("altText")" class="img-responsive img-circle" />
    
                }
            }
        }
    
    }
    

    Again, thank you very much for your help.

    Thanks,

    David

Please Sign in or register to post replies

Write your reply to:

Draft