November Happy Hour will be moved to Thursday December 5th.

Forcing a block width

Vote:
 

Hello,

Working on the Alloy demo site as an example I'm trying to force a block to be a fixed width.  There is a example of this in the Alloy site (the Jumbotron block) but i'm trying to force the width to be smaller than full width, say half width for example.  

If i add a TemplateDescripter (Tags = new[] { Global.ContentAreaTags.HalfWidth) to my block the edit mode site of things works OK but i get the followng message in preview mode "This block type does not have a renderer for this type of content area" and the block is not displayed when viewing the website.

I also tryed setting the MaximumWidth property on the block control to Half Width, this works OK when viewing the website but when editing the block no BlockPreview is ever returned.

Can i create a block and force its width to be half width and if so what is the correct method to do so?

#73505
Jul 25, 2013 11:02
Vote:
 

OK, i might have an answer to my own question.

By defining a MaximumWidth for the block control i was preventing the method AdjustWidthOfBlocksToFillRow in SitePropertyContentAreaControls.cs from exiting the while loop because the block width couldn't be increased.  So i have modified the method as follows (Yes this is a bit of a hack and i'm looking to improve it).

 

        private void AdjustWidthOfBlocksToFillRow(IList<ContentRenderer> group)
        {
            int count = 0;
            while (RowWidth - group.Sum(b => ((IBlockControl)b.CurrentControl).Width) > 0 && count < 12) // While there is space left
            {
                foreach (var block in group.Select(g => g.CurrentControl).Cast<IBlockControl>()) // Increase size of blocks in the row
                {
                    if (block.Width + 1 <= block.MaximumWidth) // Do not exceed block maximum size
                    {
                        block.Width++;
                    }

                    if (RowWidth - group.Sum(b => ((IBlockControl)b.CurrentControl).Width) == 0)
                    {
                        // Row is filled

                        break;
                    }
                }
                count++;
            }
        }

    

#73512
Edited, Jul 25, 2013 12:19
Vote:
 

We use pure Html/Css for this. Then based on the model you could add specific CSS classes in your view.

Greetings, Martijn

#73519
Jul 25, 2013 13:56
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* 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.