Krishnan Krishnan - 23 days ago 6
CSS Question

Parent div CSS classes are not getting added to child div

I have a working dropdown with proper CSS classes and it works as expected. In another html page I have copied the same div structures including the CSS classes but it doesn't work.
I am using Chrome browser and When I do the F12 - inspect, I notice that the parent div class are not getting prefixed, and also the right CSS classes are not getting referenced.

Please find the snapshots which compares both with F12 - Inspect details
enter image description here

F12 Inspect Details

HTML code for the dropdown which works correctly

<div class="application-list">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="applicationMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{selected.application}}<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="applicationMenu">
<li *ngFor="let app of applications">
<a (click)=onChange(app)>{{app.application}}</a>
</li>
</ul>
</div>
</div>


My HTML code for the dropdown which doesn't works correctly

<div class="col-lg-7">
<div class="col-xs-12 col-md-12">
<div class="col-lg-1">
<div class="application-list">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="applicationMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{selected.name}}<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="applicationMenu">
<li *ngFor="let app of workbookSheetsList">
<a (click)=onChange(app)>{{app.name}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>


What is the mistake I am doing here?

Answer

EDIT: I just discovered a small, but essential detail:

The CSS selector in the first image starts with application-list..." - WITHOUT a leading dot, which applies to the <application-list> tag, but not for the class .application-list....

In your first example there actually IS a tag <application-list> in the HTML, in the second example there is a div tag with the class application-list- so the selector application-list.. in your first example will only apply to the tag, not to the class with that name.

To fix it, either insert a wrapping tag <application-list> into the HTML of the second page or change the selector of that CSS rule to '.application-list...` (including the dot) – the class is present in both examples, the tag only in the first one.

Comments