CODEWITHSUNDEEP
cssangularjsbootstrap-4angularjs-scope
orangejuice
orangejuice

Reputation: 413

`ng-scope` class causing issues with the UI

I have an issue where the ng-scope css class is causing issues with my UI.

Essentially I want my toDoListRow div to have a height of 70%.

But this will not apply unless I define the ng-scope class to have a height of 100%, the issue with that is it then causes unexpected behaviour further down the line whenever a new scope is applied.

I have tried setting the ng-scope to have a min height instead of just height, but this still means my toDoListRow has no height at all.

See first image for what it should look like.

enter image description here

Second image is what it looks like when I don't apply any height to the ng-scope class or use min-height:100%.

enter image description here

index.html 

<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do App</title>
    <script src="angular/angular.min.js"></script>
    <script src="app.module.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="app/assets/css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>

<body>

    <div ng-controller="homePageCtrl">
        <div class="row header">
            <div class="col-12">
                <h1>DOINGO</h1>
                <p>0 Open Tasks</p>
            </div>
        </div>
        <div class="row toDoListRow">

            <div class="row newItem" ng-show="toDoList.length > 1" ng-repeat="item in toDoList">
                <div class="col-2">
                    <button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
                </div>
                <div class="col-8">
                    <h4>{{item.project}}</h4>
                    <p>{{item.task}}.</p>
                </div>
                <div class="col-2">
                    <button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
                </div>
            </div>

        </div>

        <div class="row addItemRow">
            <div class="col-12 text-center">
                <button type="button" class="btn btn addItem" data-toggle="modal" data-target="#newItemModal">
                    <i class="fas fa-plus-circle fa-3x"></i>
                </button>
                <div class="modal fade" id="newItemModal" tabindex="-1" role="dialog" aria-labelledby="newItemModal"
                    aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title col-11 text-center" id="newItemModal">Add new item</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form ng-submit="addNewToDoTask()">
                                    <div class="form-group">
                                        <label for="projectInput"><strong>Project</strong></label>
                                        <input type="text" class="form-control" id="projectInput"
                                            ng-model="projectInput" placeholder="Enter the name of the project">
                                    </div>
                                    <div class="form-group">
                                        <label for="taskInput"><strong>Task</strong></label>
                                        <input type="text" class="form-control" id="taskInput" ng-model="taskInput"
                                            placeholder="Enter your task details">
                                    </div>
                                    <button type="submit" class="btn modalSubmitButton">Add</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>
</body>

</html>

styles.css

html,
body {
    height: 100%;
    width: 100%;
}

.row {
    margin: 0;
}

.ng-scope {
    min-height: 100%;
}

.header {
    background-color: rgb(35, 35, 80);
    color: white;
    height: 20%;
    width: 100%;
    text-align: center;
    padding-top: 2.5rem;
}

h1 {
    font-family: 'Acme', sans-serif;
    margin: 0;
}

.toDoListRow {
    height: 70%;
    width: 100%;
    background-color: rgb(252, 70, 100);
}

.newItem {
    width: 100%;
    margin-top: 2rem;
}

.addItemRow {
    height: 10%;
    background-color: rgb(252, 70, 100);
}

button {
    display: inline-block;
}

.modal-title {
    text-align: center;
    color: white;
}

.modal-header {
    background-color: rgb(35, 35, 80);
}

.modal-body {
    background-color: rgb(252, 70, 100);
}

.modalSubmitButton {
    background-color: rgb(35, 35, 80);
    color: white;
}

Upvotes: 0

Views: 1199

Answers (1)

georgeawg
georgeawg

Reputation: 48948

Don't use the ng-scope class for that purpose.

Instead define your own classes: 

̶.̶n̶g̶-̶s̶c̶o̶p̶e̶ ̶{̶
.toDoList {
    height: 100%;
}

.toDoListRow {
    height: 70%;
    width: 100%;
    background-color: rgb(252, 70, 100);
}

And use it in the template:

<div ng-controller="homePageCtrl" class="toDoList">
    <div class="row header">
        <div class="col-12">
            <h1>DOINGO</h1>
            <p>0 Open Tasks</p>
        </div>
    </div>
    <div class="row toDoListRow">    
        <div class="row newItem"  ng-repeat="item in toDoList"
             ng-show="toDoList.length > 1" >
            <div class="col-2">
                <button class="itemComplete btn">
                    <i class="far fa-check-circle fa-2x"></i>
                </button>
            </div>

This will make your CSS and HTML easier to understand, debug, test, and maintain.

New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes, so the problem often shows up when these directives are involved.1

Upvotes: 1

Related Questions