Editing a block: selected area is below the block area?

Permalink
I went into edit mode to edit a block and the "selected" (grey) area is consistently about 1cm below the block frame.

See images:

http://screencast.com/t/FzM0ZgI4K4...

http://screencast.com/t/27MzU8BZBCX...

Is there any way to fix this?

Running concrete 5.6.1

 
adajad replied on at Permalink Best Answer Reply
adajad
My guess is you have built your theme on a framework using clashing styles.

Try to add this to your main css file:
#ccm-highlighter {
        margin-top:-49px !important;
}
nicolechung replied on at Permalink Reply
That totally fixed it. I wonder what's clashing with it...went to do a search for ccm-highlighter and didn't find that...must be something else pushing the div around I guess?
sherri333 replied on at Permalink Reply
sherri333
Thanks, this helped me also. First time one of my themes had this problem but happy to find the fix so easily.
nickodalton replied on at Permalink Reply
nickodalton
thanks, useful for me too. Couldn't see what was clashing as everything was relatively positioned (except sticky footer) and moved down correctly in edit mode by 49px, it's just that the ccm highlighter chose to double it!
nicolechung replied on at Permalink Reply
I just can't believe that the answer given to me was correct down to the last pixel.

I think it might be bootstrap. I'm using a bootstrap theme, and concrete5 uses bootstrap but they customize it for their needs. So sometimes for things like the ecommerce addon, you have to use the inspector to change some of your bootstrap css to match concrete5.
Steevb replied on at Permalink Reply
Steevb
It might depend on your theme CSS file.

This fix is NOT good!

Look at the theme CSS file, does IT need fixing?
adajad replied on at Permalink Reply
adajad
The best would be to wrap your page and prepend your styles with the wrapper id.
I never said it was the best solution, but as a quick fix it's not that bad.

Please supply a better fix that is easy to understand instead of just saying 'This is NOT a good fix'. That would be great and probably more helpful for the community.
Steevb replied on at Permalink Reply
Steevb
As I said it will depend on the theme CSS, as you mentioned in your first reply (clashing).

Fixed headers, content containers, bootstrap stuff and sticky footers vary and can cause issues.

We are told, as you rightly said, use a 'wrapper'.

If you need that 'ccm' fix then something is wrong!

Is anybody using
html{height:100%}
or similar?


Have you put 'absolute' and 'relative' in the right place and on the right element?
adajad replied on at Permalink Reply
adajad
Those are solid things to start with.

I would like to suggest to all who plan to use a framework to really understand the code you are working with. That way it will be so much easier to troubleshoot if anything goes wrong.

(I really hate typing on my phone... This post took like five min to type. )
Steevb replied on at Permalink Reply 1 Attachment
Steevb
You need one of these.

See attached