HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Side by Side Boxes

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#94161 (In Topic #18783)
Avatar

Community saint

Hi,

I would like to be able to place [box] tags around two items on my page and have them sit side by side and only shift down should the page get too narrow.

I can introduce some CSS to restrict their width and float them left and right but they always start on the next line not next to each other.

I then tried to introduce a div container to hold the lot but the second box always gets positioned outside the container - saw this by looking at Firebug.

Is there an easy way to make two boxes float next to each other using the [box] tag ? (I like the formatting of them). Or would it just be easier to produce my own div layout and box formatting ?

Cheers,
Ade
Back to the top
 
Posted
Rating:
#94166
Avatar

Community saint

Hey Ade,

Try to adapt the following to suit your space:

Code

[title="1"]User's Choice[/title]
{| 70%:27% wide floats
| [box][block="site:news:select" striptitle="1" onlyifpermissions="0" leave_page_and_zone="0" merge_parameters="1"]main_include_module[/block][/box]
| [box="Random Quotes"][block="quotes1" title="Quote-1"]main_quotes[/block][/box]
|}
  • The widths you set as percentages are 'critical' inasmuch as you need to shoehorn the boxes into the space, and that includes the whitespace. So, trial-and-error might be the order of the day.
  • The curly braces and pipe symbols are key to the layout.

I have this code (much expanded) on my front page and it fits quite seamlessly - or so it appears! Goes without saying that you will substitute your own 'blocks' for what I've shown as an example.

Give it a run and see what you get.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#94174
Avatar

Community saint

Fletch you are a star !!

It works like a charm - is this documented anywhere in the OCP docs ? I have been through every doc in detail and I could not find it.

Merry Christmas.

Cheers,
Ade
Back to the top
 
Posted
Rating:
#94179
Avatar

Community saint

Hi Fletch,

I seem to of found an oddity and I think it may be to do with referencing an attachment inside the box:

My code looks like this:

Code

[no_parse][box="Offical Parts Supplier"][url="http://www.golfmk1.co.uk" target="_blank"][attachment description="CQPartner" type="inline" thumb="0" param=""]16[/attachment][/url][/box][/no_parse]
​​

I had to add no_parse to get it to display in the code box !

If I add a simple block, I have used the main_recent_galleries one then it works a treat. But if I add the box above something really weird happens:

I can hit preview on the main page and it works as expected - hence my earlier reply - but once I hit save then everything in the main window gets reduced to just the box code shown above, that box still appears but the rest of the page is gone :'(

Any idea or is it a bug ?

I am going try it with images stored in the images_custom directory instead of attachments.

Cheers,
Ade
Back to the top
 
Posted
Rating:
#94185
Avatar

Community saint

Also the thing I liked about using attachments is that they scale inside the box. Using img tags means that they are a fixed width, unless you know how to make them expanded and contract with the box ?

Cheers,
Ade
Back to the top
 
Posted
Rating:
#94187
Avatar

Community saint

Let's see if we can 'unscramble' this a bit.

One of the issues you've encountered could be attributed to the different widths available to you in 'Preview' and 'Page display'. The first displays it fine; the second probably pushes it to the bottom of the next available column because it has run out of 'space'.

So …

I took your code and inserted it into a 'test' post on my site and came up with this after a couple of adjustments:



The code …

Code

[title="1"]Suppliers[/title]
{| 45%:45% wide floats
| [box="Offical Parts Supplier"][url="Crazy Quiffs"]http://www.golfmk1.co.uk[/url]

[attachment_safe description="CQPartner" type="inline" thumb="1"]302[/attachment_safe][/box]
| [box="Offical Parts Supplier"][url="Crazy Quiffs"]http://www.golfmk1.co.uk[/url]

[attachment_safe description="CQPartner" type="inline" thumb="1"]302[/attachment_safe][/box]
|}

Some notes about the code and attachment:
  • citing a URL the way I have in the Comcode automatically directs to a new tab/page (equivalent to target="_blank") and gives a 'name' to the site you are linking to.
  • I have line-spaced between the URL and the thumb image using normal Comcode CR/LF. You'd need to use <br /> if you are wrapping the code in 'semihtml' or 'html'.
  • my attachment ID won't work for you, of course, but you can quickly insert your own image if you want to take it for a test run.
  • you can change thumbnail image sizes in the CSS, but it will be 'global' if you do. Unless you make this a specific (additional) property.
  • The <h3> I've used for the title 'Suppliers' is my own CSS adaptation (includes the arrow image), once again adjusting the CSS to reflect this as a specific property. You will, of course, use your own header/title code to suit your site display.

If any of that makes sense to you, I wish you better luck at the next attempt. Do let us know if it works, and allow us to see it in use by posting a link for us to take a look.

 :thumbs:  


Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#94192
Avatar

Community saint

Hi Fletch,

Thanks for the information - but there is something weird going on with my setup.

I have create a new page and pulled it back to the bare minimum, I have:

Code

[no_parse][title]Title goes here[/title]

{| 70%:27%: wide floats
| [box][attachment_safe description="CQPartner" type="inline" thumb="1"]14[/attachment_safe][/box]
| [box][attachment_safe description="CQPartner" type="inline" thumb="1"]14[/attachment_safe][/box]
|}

 [block]main_comcode_page_children[/block][/no_parse]



If I hit preview then the preview renders correctly, but when I scroll back up to the comcode page box most of it has been deleted, except for:

Code

[no_parse][box][attachment_safe description="CQPartner" type="inline" thumb="1"]14[/attachment_safe][/box][/no_parse]


The same thing happens if I save, everything but the above line gets deleted - very frustrating indeed.

Any idea as to what might be happening ?

I am on a Mac Book Pro with the latest Mountain Lion + Updates using Safari, I have tried Firefox and it behaves the same.

Cheers,
Ade
Back to the top
 
Posted
Rating:
#94194
Avatar

Community saint

Lhasadreams said

… everything but the above line gets deleted - very frustrating indeed.

Any idea as to what might be happening?
Hmmmmmmm…

Something similar happened to me when I was testing out the code. But, as long as I only 'Previewed' it retained all the content of the box. When I 'Saved' and went back to edit I found that only a single line remained. I attributed it to:
  • 1. same attachment ref being used on different lines
OR
  • 2. the use of 'special' codes being used in a forum post (in which I tested)

But it looks like this calls for a Chris-moment as it appears there is something wrong with how the code is 'read', 'rendered' and 'remembered'.

Sorry I can't be any more helpful than that. Perhaps somebody else (temp1024?) who has a hook on this might step in and advise.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#94195
Avatar

Community saint

Is this a typo when making the post?

That should not be in there.

Steve
Back to the top
 
Posted
Rating:
#94196
Avatar

Community saint

Ok thanks Fletch, at least you have seen similar behaviour, lets hope Chris can shed some light on it :-)

Sholzy, yes that was a typo - but even corrected OCP still behaves the same - great spot though !!

Cheers
Ade
Back to the top
 
Posted
Rating:
#94244
Avatar

Maybe you just need to disable the "Convert XHTML to Comcode" option.

Regarding some of the issues with 'no_parse' in this topic, disabling the WYSIWYG will help.

Generally if you want to use more sophisticated markup, you wanted "Convert XHTML to Comcode" off, and you also want the WYSIWYG off. This stops ocPortal trying to simplify code down.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: