I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: https://i.sstatic.net/i7eZT.png
The issue arises when setting the div's width as a percentage of the screen size due to a hidden sidenav that affects the layout. This sidenav disappears on smaller screens, causing each mdCard (angular built-in elements) to occupy more space. However, the fixed div (also an mdCard) does not adjust accordingly, creating a disparity. To maintain consistency, I need a method to synchronize its width with its siblings. Here's a simplified version of my template:
<!-- content container -->
<div>
<!-- various mdCards -->
<md-card class="searchResult">
<!-- Always present -->
</md-card>
<md-card class="searchResult" ng-repeat="result in searchResults track by $index">
<!-- Dynamic cards -->
</md-card>
<!-- fixed div -->
<md-card id="totals" ix-totalbar>
</md-card>
</div>
Here are the relevant styles:
.searchResult{
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#totalsbar{
position: fixed;
bottom: 55px;
}
To address this, I attempted using a directive named ixTotalbar without success. Regardless of the approach I took, none yielded the desired outcome. My code snippet demonstrates these efforts:
// Relevant TypeScript logic
namespace incode.directives.label {
interface IScope extends ng.IScope {
}
export class IncodeTotalsBarDirective implements ng.IDirective {
restrict = 'AE';
public require: 'ngModel';
public scope: Object;
replace = true;
public link: ng.IDirectiveLinkFn | ng.IDirectivePrePost;
constructor() {
// Link function
}
// Factory method for directive creation
public static factory(): ng.IDirectiveFactory {
var directive = () => new IncodeTotalsBarDirective();
return directive;
}
}
angular.module('incode.module')
.directive('ixTotalbar', incode.directives.label.IncodeTotalsBarDirective.factory());
}
A significant finding from the code is the presence of console.log() statements, showing sibling element information, including correct styles. Yet, despite this data, the width adjustment fails to meet expectations. Additional troubleshooting is necessary to resolve this discrepancy.