SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Modal background not filling whole window...

    I'm trying to use the foundation's revel modal script. The trouble is the site isn't built using all foundation framework at this stage I wish to just use UI elements of it. For this reason and in particular the fact I'm not using thier grid that I'm getting problems.

    The modal is working yet the background when the modal is active only covers a little of the screen - example is seen here.

    I want the background to completly cover the screen as per normal...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You are over-riding some of the modal's rules due to its position in the html and are applying a width to it via he following rule:

    Code:
    .news-item div {
        float: right;
        width: 355px;
    }
    You can over-ride those styles with an important declaration like this.

    Code:
    .reveal-modal-bg {
        background: rgba(0, 0, 0, 0.45);
        display: none;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        bottom:0;
        width: auto !important;
        z-index: 40;
    }
    I also set the dimensions using top, bottom right and left at the same time so know widths or height are needed.

    The modal background could actually be outside the current html anyway on its own because it is a fixed positioned element and always relates to the viewport (unless of course the script requires it to be where it is -which I didn't check.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul for the second time today - thank you. How did you know which rule was overiding the modal's?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by stephen_ View Post
    Paul for the second time today - thank you. How did you know which rule was overiding the modal's?
    Just look in the Firebug panel and you can see all the rules that apply to a given element and where they came from. Chrome has a similar inspector which can show you where rules have come from. (Even IE has developer tools but they are not as useful as the ones above.)

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes I see this I think - (make sure 'Only show applied styles' is clicked on the CSS panel?) this is very useful -thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •