This Bugzilla instance is a read-only archive of historic NetBeans bug reports. To report a bug in NetBeans please follow the project's instructions for reporting issues.

Bug 257789 - CSS not found with partials for Angular
Summary: CSS not found with partials for Angular
Status: RESOLVED INCOMPLETE
Alias: None
Product: web
Classification: Unclassified
Component: AngularJS (show other bugs)
Version: 8.1
Hardware: PC Windows 10 x64
: P1 normal (vote)
Assignee: Petr Pisl
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-01-31 19:43 UTC by pborregg
Modified: 2016-07-19 12:24 UTC (History)
1 user (show)

See Also:
Issue Type: DEFECT
Exception Reporter:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description pborregg 2016-01-31 19:43:28 UTC
So, I'm building an Angular Application.

My partials are starting with <div></div>

In the index.html Page the main div has a <ul></ul>

The interior of that <u> are <li> tags like so:

<!-- REELs SECTION -->
<li id="page_Reels"></li>
<!-- END REELs SECTION -->

the REELS partial looks like this:

<!-- START REELS -->
<div class="box1">
    <div class="inner">
        <a href="#" class="close" data-type="close"><span></span></a>
        <h2>View My Reels</h2>
        <div class="wrapper">
            <figure class="left marg_right1">
                <img src="images/pageReels_img2.png" alt="" />
            </figure>
            <p>To view my reels, simply click on the link below and the reel will appear in the player.</p>
            <ul class="list2 pad_bot1">
                <li>
                    <a href="javascript:flipMe('0','m');" 
                       style="cursor:pointer;">Promo Reel</a>
                </li>
    </ul>
        </div>
        <p class="color1 pad_bot2" align="center">
            <strong>
                <span id="reelTitle"></span>
            </strong>
        </p>
        <!-- START PLAYERS -->
        <div id="playerContainer" class="wrapper pad_bot3"></div>
        <script>

            $(document).ready(function () {
                $("#reelTitle").html("Welcome to the show! Click on a link above to watch...");
                $("#playerContainer").load("imports/blankPlayer.html", function () {

                    $("#blankTheatre").show();
                    console.log("Loaded theatre");

                });
            });
        </script>
    </div>
</div>
<!-- END REELS -->  


In the folder structure, index.html is in the root. The partials are here:

root --|
       |--Partials
       |--Css

and so on.

Other folders are off Root.  This is a Single Page Application.

So, if I DO NOT put the partials in a separate file and place it directly inside index.html, the CSS works fine.

BUT, if I use the partials, the CSS get's lost and the close button <span>:

<a href="#" class="close" data-type="close"><span></span></a>

doesn't work. Meaning: When it's a PARTIAL, the "X" close button, on hover, doesn't change the opacity to 1 flipping the foreground/background and color from black to white.  Pretty Simple.

BUT, when it's NOT a partial, the close button works perfectly.  In the inspector, this is what I see:


element.style {
    opacity: 0;
}
index.htmlmedia="all"
.close span {
    background: url(../images/close.gif) 0 bottom no-repeat;
    display: block;
    height: 100%;
    width: 100%;
}

When it IS a partial, this is what I see:

element.style {
}
index.htmlmedia="all"
.close {
    background: url(../images/close.gif) 0 0 no-repeat;
    display: block;
    height: 25px;
    position: absolute;
    right: 20px;
    top: 30px;
    width: 25px;
}

NOTE the element.style is EMPTY. This element style is added during initialization.

In summary; how can I get my partials to see the CSS files, if that's exactly what they are: Partials?

Thanks,

Peter
Comment 1 Petr Pisl 2016-07-19 12:24:56 UTC
I'm sorry for the long time to response. The bug was assigned to me recently. I'm not sure whether I understand the problem. Could you attach a screenshots to help me understand it? Thanks