I have created my own modals from scratch and i want to prevent scrolling in the background when a modal is open, all i can find online is stuff about bootstrap which isn't helpful to me because my code doesn't automatically call 'modal-open' so
body.modal-open{
overflow:hidden;
}
Doesn't work for me.
<div id="wrapper3">
<a class="button" href="#openModal-4">
<img class="image"src="img/Animation.png">
<p class="text">Animation</p>
</a>
</div>
<div id="openModal-4" class="modalbg">
<div class="dialog">
X
<div class="popout">
<h1>2D Animation Project</h1>
<div>
<h2>Project Brief</h2>
<a class="modalfullimg"><img src="img/Design/moodboard.png"></a>
</div>
<h2>Sketches</h2>
<a class="modalfullimg"><img src="img/Design/initialsketches.png"></a>
</div>
</div>
</div>
Can you just modify the script you wrote to add a body class like 'modal-open' so you can apply the appropriate CSS? Seems like the easiest solution, if you're making it custom anyway.
Related
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
Here is my md-card's loop (except the first div):
<div layout="column" layout-gt-sm="row" layout-wrap="">
<div flex="25" flex-gt-sm="50">
<md-card>
<md-card-header>
<md-card-avatar><img src="#" />
</md-card-avatar>
<md-card-header-text>
<span class="md-title">Angular</span>
<span class="md-subhead">Material</span>
</md-card-header-text>
</md-card-header>
<img ng-src="{{imagePath}}" alt="Washed Out" class="md-card-image" />
<md-card-title>
<md-card-title-text>
<span class="md-headline">Text</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
Content
</p>
</md-card-content>
<md-button>Button</md-button>
</md-card>
</div>
<!-- another card -->
</div>
This works fine, here is the picture.
But what if i don't want to display cards strictly on the lines? Is there any way to get something like
this?
That kind of layout will require you to use some javascript to add to the view logic. Since each of your cards are using rows, it would not be currently possible to do that styling.
I would check out http://masonry.desandro.com/
I want to center the title and navigation links in my paper-toolbar. I am using the properties "justify" and "bottomJustify" to accomplish this, but the content remains on the left side.
<paper-toolbar class="medium-tall" justify="center" bottomJustify="center">
<div class="title">Titel</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
It does not matter which "tallness" I choose. It never works. Does anyone has an idea how to solve this?
Update:
This code works:
<paper-toolbar class="medium-tall" justify="center" bottom-justify="center">
<div class="top">
Title
</div>
<div class="bottom">
<a data-route="contact" href="contact">
<span>Contact</span>
</a>
</div>
</paper-toolbar>
I had to:
change the bottomJustify to bottom-justify
remove the "title" class and instead use the "top" class
In your code you should use bottom-justify instead of bottomJustify to set the attribute!
I know similar questions have been asked earlier, but I have tried them and they aren't working. I have a dialog box, with some text and a button, which I need to position in the center of the box. My HTML is given below:
<div id='step3' class='item'>
<div class='row span9'>
<div class="text center"><button id='loginButton' class='btn btn-success' onClick='window.location.reload()'>Login again</button></div>
<small>using your new credentials.</small>
</div>
</div>
I tried placing the button inside a div and used <div style="text-align:center"> but it didn't work. Does anyone know how I could place the button in the center, preferably without adding an external CSS class?
Your class="text center" should be class="text-center", and you also don't need the row tag (it breaks the responsiveness).
<div id="step3" class="item">
<div class="span12">
<div class="text-center">
<button id="loginButton" class="btn btn-success" onClick="window.location.reload()">Login again</button>
<br> <small>using your new credentials.</small>
</div>
</div>
Also you have single quotes '' on most of your markup. Keep in mind this is with an old version of Bootstrap so depending on how wide the viewport is it might not be perfectly center.
![I want to achieve the following red circle through css. I am using jquery mobile with angular js.My code is as below.
<div data-role="page" id="p2">
<div class="ui-bar ui-bar-d "data-role="header" >
Chat
<h1> contacts </h1>
Photos
</div >
<div data-role="content" data-position="center">
<div ng-controller="TalkCtl">
<ul >
Search:
<input type="search" ng-model="searchText">
<li ng-repeat="talk in talks | filter:searchText">
{{talk.name}} </br> {{talk.text}}
</li>
</ul>
</div>
</div>
IMAGE SNAPSHOT
This can be easily done using css background-image property, coupled with positioning and z-indexing.