Blocks and partials not clickable in contentarea, how do i solve this?

Vote:
 

I've been been creating a website by implementing stuff from Alloy, but i'm not sure why this isn't working.

When i create blocks and put them in my content area, they're not clickable. I've got this invisible list of blocks at the top of the content area. The rendering and display options are working perfectly, it's just that i can't click on any blocks. Same with page partials.

Thanks in advance

#208023
Edited, Oct 14, 2019 21:13
Vote:
 

Is this happing with every content area and block? Because this seems like the UI issue, your floats are not clear.

See this document, if it helps let me know

https://www.w3schools.com/howto/howto_css_clearfix.asp

Or you can take help of any UI developer.

#208024
Oct 11, 2019 8:53
Robert Danielsson - Oct 11, 2019 9:00
Yes it's happening on all pages and content areas. I'm using materialize as my framework if that says anything
Vote:
 

Hi Robert,

Can you please mention the Episerver version here?

#208032
Oct 11, 2019 9:08
Robert Danielsson - Oct 11, 2019 21:30
Version is 11.12.0.0.
Vote:
 

Version is 11.12.0.0.
Also i'd like to add that my properties are rendering like they should with the border around them (using propertyfor), all of them. It's only an issue with content areas

EDIT: More pictures 

Using @Html.PropertyFor() - Working perfectly

Blocks inside a content area

#208033
Edited, Oct 11, 2019 9:33
Ravindra S. Rathore - Oct 11, 2019 9:43
It should work. Is this behavior in all the browsers?
Vote:
 

Do a inspect eliment and see the css for the elements for the blue border. It may be like any custom css overwriting the default or the floating issue.

#208035
Oct 11, 2019 9:45
Robert Danielsson - Oct 11, 2019 12:37
I've got this simple textblock:
@model TextBlock
(DIV with class="col s12 m8)
@Html.PropertyFor(m => m.Text)
(End of DIV)
I tried removing the classes and it solved the problem. So something is going on with me using materialize. I'm not sure why, since bootstrap works on Alloy.
Do i need to upload the CSS file some specific way to be able to view and use it correctly within the edit mode?

EDIT: Apparently i can't post html elements here, they're getting removed after i post them. But there's a wrapping div around the @Html.PropertyFor() with classes ("col s12 m8")
Praful Jangid - Oct 11, 2019 12:49
This comment box will remove the tags. So you can use the main comment box to insert code (Insert menu/Code Sample to insert code).
Vote:
 

The problem occurs when i add any column classes (materialize classes). If i remove the classes from the following code it works:

@model TextBlock

@Html.PropertyFor(m => m.Text, new { CssClass = "col m4 s12" })

Same with this one:

@model ImageBlock

<div class="col m8 s12" @Html.EditAttributes(m => m.Image)>
    <img src="@Url.ContentUrl(Model.Image)" style="width:100%;" />
</div>

I'm using materialize to structure my HTML. It's a school assignment and i don't want to spend my time writing custom CSS. What do i do?

#208046
Oct 11, 2019 13:03
Vote:
 

So the col class adds the float and you need to clear the float or try adding row class on the parent div.

Example:

@Html.PropertyFor(m => m.ContentArea, new { Tag = "some-tag", HasContainer = true, CustomTag = "ul", CssClass = "this-is-a-list-class", ChildrenCustomTagName = "li", ChildrenCssClass = "this-is-list-item-class" })

Reference:

https://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/

So, as it's a css issue. You can ask the frontend developer for help.

#208047
Oct 11, 2019 13:21
Robert Danielsson - Oct 11, 2019 13:31
Thank you for your comment, however there is no frontend developer because it's a school assignment. I'll try fiddling with the css some more
Vote:
 

I'm rendering my contentarea with the following code:

@Html.PropertyFor(m => m.CurrentPage.MainContentArea, new { CssClass="row" })

Which outputs this:

The narrow image block (just an example) looks like this:

<div class="col m4 s12" @Html.EditAttributes(m => m.Image)>
    <img src="@Url.ContentUrl(Model.Image)" style="width:100%;" />
</div>

So my display options work, they change which partial/block is rendered. But they render inside empty divs (because of PropertyFor()). 

Can someone ELI5 how i should solve this? 

#208072
Oct 11, 2019 21:28
Vote:
 

See this thread

https://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2019/7/removing-extra-divs-from-episerver-content-areas/

#208075
Oct 12, 2019 2:34
Robert Danielsson - Oct 12, 2019 12:28
That package might work, it's designed for bootstrap though so i'm not entirely sure. Thanks
Vote:
 

You just need to render the property like this

@Html.PropertyFor(m => m.ContentArea, new { HasContainer = false})

Article reference

https://www.dcaric.com/blog/removing-extra-divs-from-episerver-content-areas

#208076
Edited, Oct 12, 2019 6:02
Robert Danielsson - Oct 12, 2019 12:24
That removes the wrapping div (which im using to set a div with "row" class wrapping the contentarea), not the extra divs around the actual content.
Vote:
 

Hell yes, i managed to solve the issue by installing the EPiBootstrapArea nuget package! Because we're using Materialize and not Bootstrap, i had to add some custom CSS to be able to use the nuget package.

Some sample code:

public class DisplayModeFallbackCustomProvider : DisplayModeFallbackDefaultProvider
    {
        public override List<DisplayModeFallback> GetAll()
        {
            var displayOptionsList = new List<DisplayModeFallback>();

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.Full,
                Tag = SiteTags.Full,
                LargeScreenWidth = 12,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 12,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.TwoThirds,
                Tag = SiteTags.TwoThirds,
                LargeScreenWidth = 8,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.OneThird,
                Tag = SiteTags.OneThird,
                LargeScreenWidth = 4,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.HalfWidth,
                Tag = SiteTags.HalfWidth,
                LargeScreenWidth = 6,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.OneQuarter,
                Tag = SiteTags.OneQuarter,
                LargeScreenWidth = 3,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.ThreeQuarters,
                Tag = SiteTags.ThreeQuarters,
                LargeScreenWidth = 9,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            return displayOptionsList;
        }
    }

Thanks for the replies, appreciate it!

#208090
Oct 12, 2019 14:54
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.