WYSIWYG dropdowns slide out of WYSIWIG editor box
Permalink
Anyone know why this happens? (screenshot attached) I recall having this problem when I first started using C5 almost 2 years ago. I can not remember how I fixed it. It was definitely something in my CSS that was screwing it up, though.
If I figure it out before you do, I will come back and post the solution so I (and you) never have to figure it out again!
If I figure it out before you do, I will come back and post the solution so I (and you) never have to figure it out again!
same for me sometimes.
Do you have any kind of tricky CSS styling to create a footer area on your sites? If so, see my solution below...
MY PROBLEM / SOLUTION:
Found it in my notes. My problem stems from Ryan Fait's sticky footer solution. It can also cause other problems in Edit mode, so if you have something like this going on, it is a good idea to use a stylesheet switcher when you're in Edit Mode.
The style switcher is very handy to turn off margins and things that may center a layout but screw up the WYSIWYG editor's control panels and stuff. In fact, I think I will be using this switcher from here on out.
In case you're curious, Ryan Fait's stickyfooter solution looks like this (numbers change depending on how big your footer is):
/*
STICKY FOOTER STUFF
*/
html, body {
height: 100%;
background-color:#fff;
font:normal 13px/20px Arial, Helvetica, sans-serif;
}
a, a:visited { color:#666;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -147px; /* important */
background-color:#fff;
width:100%;
}
.push {
height: 147px; /* important */
clear:both;
}
#footer{
height: 45px;
padding: 56px 0 46px 0;
clear:both;
width:940px;
margin:0 auto;
text-align:center;
color:#666;
font: normal 11px/18px Arial, Helvetica, sans-serif;
background:#fff;
}
----------------------
And here is what I do with the sticky footer portion on the alternate editmode.css style sheet:
/* For Concrete5 EDIT MODE - we need to disable the stickyfooter so that C5 controllers work. A lot of stuff gets thrown off vertically with the various blocks and packages */
.wrapper {
margin: 0;
}
.push {
}
.footer{
height: 165px;
^ This disables the footer positioning sticking to the bottom in Edit Mode, but who really cares? So it won't be at the very bottom of the page. Big woop.
Found it in my notes. My problem stems from Ryan Fait's sticky footer solution. It can also cause other problems in Edit mode, so if you have something like this going on, it is a good idea to use a stylesheet switcher when you're in Edit Mode.
<?php if ($c->isEditMode()) { //if its in editmode ?> <link href='<?php echo $this->getThemePath() ?>/editmode.css' rel='stylesheet' type='text/css' /> <?php } else { //if its not in editmode ?> <link href='<?php echo $this->getThemePath() ?>/style.css' rel='stylesheet' type='text/css' /> <?php } ?>
The style switcher is very handy to turn off margins and things that may center a layout but screw up the WYSIWYG editor's control panels and stuff. In fact, I think I will be using this switcher from here on out.
In case you're curious, Ryan Fait's stickyfooter solution looks like this (numbers change depending on how big your footer is):
/*
STICKY FOOTER STUFF
*/
html, body {
height: 100%;
background-color:#fff;
font:normal 13px/20px Arial, Helvetica, sans-serif;
}
a, a:visited { color:#666;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -147px; /* important */
background-color:#fff;
width:100%;
}
.push {
height: 147px; /* important */
clear:both;
}
#footer{
height: 45px;
padding: 56px 0 46px 0;
clear:both;
width:940px;
margin:0 auto;
text-align:center;
color:#666;
font: normal 11px/18px Arial, Helvetica, sans-serif;
background:#fff;
}
----------------------
And here is what I do with the sticky footer portion on the alternate editmode.css style sheet:
/* For Concrete5 EDIT MODE - we need to disable the stickyfooter so that C5 controllers work. A lot of stuff gets thrown off vertically with the various blocks and packages */
.wrapper {
margin: 0;
}
.push {
}
.footer{
height: 165px;
^ This disables the footer positioning sticking to the bottom in Edit Mode, but who really cares? So it won't be at the very bottom of the page. Big woop.
