Jump to content

Archived

This topic is now archived and is closed to further replies.

nfp1900

Adding a border to a column class causes a page reflow

Recommended Posts

nfp1900    29
nfp1900

I was working on another area of a site and was still finding this issue whereby you can use CSS to add a background to a column class but if you add a border it looks fine until you preview the site - then you'll see one column has jumped underneath. This happens if you have a two or three column layout across the page. 

 

I couldn't see any guidelines that mention this. Example:

 

If I add the following custom classes to my my code (they are column classes 6/12 - 6/12 layout)

 

.diamond, .events-column {
background-color: orange;
  border-radius: 3px;
}
 
It's fine, I get a nice orange box with a radius. But if I want to add border to my box and include:
 
.diamond, .events-column {
background-color: orange;
  border-radius: 3px;
  border-style:solid;
border-width:2px;
}

 

The boxes look ok in the visual editor but when you preview the site the columns reflow and jump to the next available area. 

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello nfp1900 

 

Do you have a link to your site please? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

This is an example of where it would happen: http://oraclecancertrust.org.gridhosted.co.uk/ways-to-donate/

 

I've tried it with different columns widths etc and it's always the same problem with the reflow when adding a border of any size. If you add the border via Chrome tools to test the CSS it's fine. But try adding it in the custom code box and you get a reflow.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Try the followingm including the margin within the css for the class. That gives this result - http://screencast.com/t/5q4ib0K9Zf

 

.donation-1, .donation-2, .donation-3 {
    background-color: #C3EAE8;
    border: 1px solid #000000;
    border-radius: 5px 5px 5px 5px;
    margin-left: 1% !important;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

Thanks for the answer

 

So that works for a 1 or 2px border but with 3px and the column reflow issue comes up again. Changing the margin-left % value then doesn't have any effect to correct the issue. 

 

Is there a sure way to get column backgrounds and borders working?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

The reason why adding a border knocks everything to naf is because the columns are calculated. By adding a border you throw this off, so instead of using border, use box shadow instead.

 

http://d.pr/i/brqC

 

The code I used is in the screenshot.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

Ok that does it, thanks. 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
toca711    0
toca711

Hi Danny

 

I tried adding your code to my custom css but I till get the overflow problem

 

.fffwhitecolumn {
  background-color: #FFF;
    color: #303030;
    border-radius: 20px;
  box-shadow: 0px 0px 0px 4px #B2B2B2;
}
 
 
any ideas?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Where is the overflow issue, I'm not seeing it on that page you linked.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • dbrowne02
      By dbrowne02+
      Hi, I am trying to figure out how to create columns where the text flows into the next column, like the attached, and am flummoxed. Does anyone have any ideas? 

    • chamois_blanc
      By chamois_blanc+
      It would be nice if all the PL5 shortcodes had a css class option to be able to add classes to the element generated by the shortcode. I'm aware it's usually possible to hack a class in by doing something like size="1x <my_class>". But a clean solution would be nice.
    • tkpagelines
      By tkpagelines+
      Hi there,
      how to make the corners of boxed columns round ?
      Any suggestions ?
      Thanks
    • JawDesigns
      By JawDesigns
      Hi to all,
      I always have this problem and I'm unhappy with the fix I usually apply for aligning columns at the bottom (see attached).
      For example: I use two text boxes side by side. Both text columns have a background colour. Text column 1 has 200 words and text column 2 has 300 words.
      How do I easily get them to align at the bottom without using a min-height declaration? I want to get text column 1 with 200 words to fit the height of text column 2 if that makes sense?
      Thanks for any help on this!
      Cheers,
      James

    • jeomiland
      By jeomiland+
      For quite a while I have worked around a refresh issue but it seems quite convoluted and near impossible to explain to clients. According to a lesson in PagelinesAcademy, it is because of javascript but there must be a more elegant way to deal with this. Here are 2 scenarios:
      1) Custom CSS: I add a css style to custom css, then have to select Edit in a component, then click in 2 text boxes to get the Refresh icon in the tools pallet to show. I click Publish a couple times then Refresh and hope that the new CSS code is still there - half the time it is not, so I have to redo a couple times till the system keeps it. Your "Tip: Hit [Cmd⌘+Return] or [Ctrl+Return] to Preview Live" at top of CSS window does nothing on my Macbook Pro.
      2) Home page at: http://199.119.180.102/~harmhill/newsite/ has 2 columns for main template area. In larger right column, I need to add a 3 column above the WPloop and below the image, which are both in that right column. I can drag the 3col section to the right place and it says "Section Added! Refresh page to view." Have tried several ways to get the section to stay and refresh but nothing works! Using cmd-r (refresh) in Mac Chrome, not my trick above... can't get the 3col section to stay on refresh, so no way to add the 3 text boxes required next.
      So 2 questions:  1) what is best way to refresh a page and preserve CSS and sections added and 2) can you put a 3-col inside 1col of a 2-col?
      thanks
×