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!
Related
I have a navbar element. It has a navbar-dropdown element. I want to add a navbar-item with a sentence to it, but word transposition in navbar-item doesn't work.
How can I turn it back on? Here's the code for the navbar-dropdown element.
<div class="is-primary navbar-dropdown is-size-4 dropdown-width">
<div class="navbar-item">
Чтобы воспользоваться функционалом системы, пожалуйста, авторизируйтесь.
</div>
<div class="navbar-item">
<a
class="button is-light"
:class="{ 'is-hidden':$store.state.isAuth }"
#click="openModal"
>
Войти
</a>
</div>
</div>
The "dropdown-width" class sets a fixed width for the element.
I want to create the same design like chrome settings page
https://www.pcworld.com/article/3162716/software/how-to-switch-to-chromes-material-design-settings-page-for-an-easier-experience.html
I do not manage to put the md-switch at the right and in static position like chrome settings
I do manage to put the md-switch in right to the title but I need it always in the middle of the card stick to right.
Image of my result: (current design)
<md-card md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
<div class="option-item">
<div class="option-item-header">
<div class="option-item-header-title">
title
</div>
</div>
<div class="clear"></div>
<div class="option-body">
<p>text</p>
</div>
</div>
<div class="option-switch">
<md-switch ng-model="vm.model" aria-label="active" ng-change="function()">
</md-switch>
</div>
</md-card>
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.
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>
I have a set of data which is an array of objects. Some objects have more data than the other. But each object will display in each col-md-4 div. Therefore, the height of each div will be different based on how much data an object has.
Here is my code:
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
My question is after ng-repeat, I want to find the biggest height of the element. And then apply the biggest height to each of the element using ng-style.
I have an idea to approach that using JQuery. However, I want to use Angular to do that? Any suggestion? Anuglar is not good for DOM manipulation?
Thank you in advanced.
After I did some research yesterday. I found an open source angular directive to solve my problem - angularJS Vertilize Directive An AngularJS directive to vertically equalize a group of elements with varying heights. In other words, it dynamically makes a group of elements the same height. Thank you Chris Collins who made this directive.
<div vertilize-container class="row">
<div ng-repeat="col in columns" class="col-sm-3">
<div class="well">
<div vertilize>
<h3>{{ col.title }}</h3>
<p>{{ col.body }}</p>
</div>
</div>
</div>
</div>
This answer should get you started on the right path.
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li outer-height ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
app.directive('outerHeight', function(){
return{
restrict:'A',
link: function(scope, element){
//using outerHeight() assumes you have jQuery
// if not using jQuery
console.log(element.outerHeight());
}
};
});