Forums

I am building my first Template and I have a problem with ui-dialog

Permalink
I made two layers that have following css 
background-attachment: fixed;
  background-image: url("../images/homepagebackground.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:90%;
  height:calc(100vh - 150px);


This css seems to move the ui-dialog dialog out of the screen when i try f.e. editing a image. has someone an idea how to solve this ?

hope this was understandable

greetings
Tobi
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi shivasidpao,

What version of concrete5 are you using?

In your code example, you have only included the CSS declarations. What is the selector that you are using with it?

If your theme CSS is affecting your concrete5 UI, then you are writing global CSS styles that target not just your theme, but everything else on the page.

Scoping your CSS is a method that lets you target just your theme. Commonly a div wrapper with the class of .ccm-page is used to scope themes.

This How-To explains scoping using a preprocessor, but it can also be done manually.
https://www.concrete5.org/documentation/how-tos/designers/easily-sco...
shivasidpao replied on at Permalink Reply
Hi MrKDilkington,
thanks for your fast answer!

I'am using
# concrete5 Version
Core Version - 5.7.4.1
Version Installed - 5.7.4.1
Database Version - 20150504000000

I tried now scoping my CSS but it does not have any effect on that problem.

I have two of those layers on the page these layers divide one content from another. and both have the same css and use only different background images.
When I remove one of the layers the ui-dialog went down a little bit but in still visibe Viewport area.
Here some more info about those layers:
<div id="shopimage">
        <?php
        $shopImage = new Area('shopImage');
        $shopImage->display($c);
        ?>
</div>

that layer contains nothing but a but a background image which looks in the end like this
<div id="shopimage">
        <div class="ccm-custom-style-shopimage"></div>
</div>

the css looks like this ("#metzger" is now scope i defined):
#metzger #shopimage {
  width: 100%;
  height: 100%;
}
#metzger #shopimage .ccm-custom-style-shopimage {width:100%;height:100%;background-size: cover;background-attachment: fixed;  }


Somehow the height of that elements moves ui-dialog from the center of the sceen to an area under the visible screen.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Can you take some screenshots of the problem?

What is the address of your website?
shivasidpao replied on at Permalink Reply
Ok just found that it helps to set 
html {height:100%;}

now the ui-dialog is in the right place again.
I wonder if the might cause other problems...
but so far it works for me.