Forcing a block width

Graham Fieldhouse

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

Graham Fieldhouse

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

Martijn van der Geest

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