Dialog box CSS… can’t find how to edit… anywhere :(
Permalink
(in 5.7)
I am trying to change the dimensions of the dialog box that pops up when editing a block. It is ridiculously small in general, but especially small for my block.
After hours of digging around the CSS/JS I managed to find out where to edit the width, border, etc, etc, but still no clue how to edit the height or font size.
I found this reference ->http://www.concrete5.org/community/forums/usage/where-to-change-css... that says the dialog CSS is in concrete/css/jquery.ui.css -> .ui-dialog but not only did this not work but looking at the CSS confused me even more
I am not a CSS guy (meaning, I have no idea when content-box and padding-box effectively do) , as I find CSS more convoluted than LISP! But here we have two different position definitions. Is this a type of some exotic, arcane CSS trick for something?
Anyway, I can set the “min-width:600px” and it works, but “min-height:600px” does not. Of course, I tried a bazillion combinations in various classes in countless files (like .ccm-ui, .ccm-blockfields, #ccm-block-form, .ui-dialog-content, .ui-widget-content, .ui-dialog, .popover-content, etc)… all with no effect.
When I look in the generated source I get even more confused :(
The containing div for the fields is
Which has a “style” tag in it, which means I can’t even override with a css file as the style always takes precedence (or is there some way I do not know about to override style tags with css)? And the div id is dynamically generated so I can override that either.
When I add min-height to .ui-widget-content, it does nothing, but when I add it to .ui-dialog-content is SHRINKS the fields div to like 50 pixels and enlarges the [CANCEL][SAVE] div to 600!! Come ON!!
So, how do I do this? How can I control the size/fonts of the itsy-bitsy dialog box filled with gigantic (14pt) text?
Thanks
p.s.
In header_top.php I have replaced (in case this matters… but I tried it both ways)
with
as per this thread ->http://www.concrete5.org/community/forums/themes/errors-after-insta...
I am trying to change the dimensions of the dialog box that pops up when editing a block. It is ridiculously small in general, but especially small for my block.
After hours of digging around the CSS/JS I managed to find out where to edit the width, border, etc, etc, but still no clue how to edit the height or font size.
I found this reference ->http://www.concrete5.org/community/forums/usage/where-to-change-css... that says the dialog CSS is in concrete/css/jquery.ui.css -> .ui-dialog but not only did this not work but looking at the CSS confused me even more
.ui-dialog { position:absolute; top:0; left:0; padding:0px; box-sizing:content-box; width:300px; overflow:hidden; outline:0; background-clip:padding-box; background-color:#FFFFFF; border:1px solid #a9b7c2; border-radius:4px 4px 4px 4px; box-shadow:0 0 20px rgba(0,0,0,0.2); outline:medium none;
Viewing 15 lines of 20 lines. View entire code block.
I am not a CSS guy (meaning, I have no idea when content-box and padding-box effectively do) , as I find CSS more convoluted than LISP! But here we have two different position definitions. Is this a type of some exotic, arcane CSS trick for something?
Anyway, I can set the “min-width:600px” and it works, but “min-height:600px” does not. Of course, I tried a bazillion combinations in various classes in countless files (like .ccm-ui, .ccm-blockfields, #ccm-block-form, .ui-dialog-content, .ui-widget-content, .ui-dialog, .popover-content, etc)… all with no effect.
When I look in the generated source I get even more confused :(
The containing div for the fields is
<div id="ui-id-1" style="display: block; width: auto; min-height: 0px; max-height: none; height: 129px;" class="ui-dialog-content ui-widget-content">
Which has a “style” tag in it, which means I can’t even override with a css file as the style always takes precedence (or is there some way I do not know about to override style tags with css)? And the div id is dynamically generated so I can override that either.
When I add min-height to .ui-widget-content, it does nothing, but when I add it to .ui-dialog-content is SHRINKS the fields div to like 50 pixels and enlarges the [CANCEL][SAVE] div to 600!! Come ON!!
So, how do I do this? How can I control the size/fonts of the itsy-bitsy dialog box filled with gigantic (14pt) text?
Thanks
p.s.
In header_top.php I have replaced (in case this matters… but I tried it both ways)
link rel="stylesheet" type="text/css" href="<?= $this->getThemePath() ?>/css/bootstrap-modified.css"
with
<?php echo $html->css($view->getStylesheet('build/bootstrap-3.2.0/bootstrap.less'))?>
as per this thread ->http://www.concrete5.org/community/forums/themes/errors-after-insta...
Ah Brilliant! I did not...
(1 minute later)
Unfortunately, that did not change the size of the dialog... or anything, actually.
I tried it on my home-made block, and on the content block.
However... you post gave me a clue... and I found this ->https://www.concrete5.org/developers/bugs/5-5-2-1/block-controller-c...
And indeed, you have to delete and reinstall the block for the effects to take effect as they are written to 'blocktypes' columns btInterfaceWidth and btInterfaceHeight only on install.
This seems like a dumb idea, to do it this way, but I'll assume there s a good reason why. But if they do prefer to do it this way, at least update the blocktypes fields with getBlockTypeInterfaceWidth|Height() on save. (IMHO)
Thanks.
(1 minute later)
Unfortunately, that did not change the size of the dialog... or anything, actually.
I tried it on my home-made block, and on the content block.
However... you post gave me a clue... and I found this ->https://www.concrete5.org/developers/bugs/5-5-2-1/block-controller-c...
And indeed, you have to delete and reinstall the block for the effects to take effect as they are written to 'blocktypes' columns btInterfaceWidth and btInterfaceHeight only on install.
This seems like a dumb idea, to do it this way, but I'll assume there s a good reason why. But if they do prefer to do it this way, at least update the blocktypes fields with getBlockTypeInterfaceWidth|Height() on save. (IMHO)
Thanks.
I don't believe that bug applies to 5.7.
In 5.7, if you update the height or width property, the block then needs to be refreshed to see the changes.
Dashboard> Stacks & Blocks> Block Types>
- then click on the block to bring up the subpage with the refresh button
In 5.7, if you update the height or width property, the block then needs to be refreshed to see the changes.
Dashboard> Stacks & Blocks> Block Types>
- then click on the block to bring up the subpage with the refresh button
I can confirm that with the latest 'develop' branch of the github repo of c57, editing the attributes and refreshing the blocks does not have any effect.
For now, I just edit the attributes directly in the table
Thanks for the feedback
For now, I just edit the attributes directly in the table
Thanks for the feedback
That is strange.
It might have to do with something in the develop branch. In 5.7.3.1, it works just fine.
It might have to do with something in the develop branch. In 5.7.3.1, it works just fine.
I can confirm that refreshing the block takes effect on the size.
Concrete5 5.7.5.3
Concrete5 5.7.5.3
Have you tried adjusting $btInterfaceWidth and $btInterfaceHeight in your block controller?
Example: