I'm struggling to hide the heading from tabs created using Angular UI.
For my solution I need to set the buttons of the tab in the header and the contents in another container on the page.
I need to hide the tab buttons rendered by the directive.
Any idea?
<div id="menuTabs">
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu1 = true">Menu1</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu2 = true">Menu2</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu3 = true">Menu3</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu4 = true">Menu4</div>
</div>
<div data-tabset id="menuTabs">
<div data-tab data-active="tabActiveMenu1">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content1
</div>
<div data-tab data-active="tabActiveMenu2">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content2
</div>
<div data-tab data-active="tabActiveMenu3">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content3
</div>
<div data-tab data-active="tabActiveMenu4">
<div data-tab-heading data-ng-class="{hide:true}"></div>
Content4
</div>
If you want to hide all but the active tab, you can do this in CSS with the following:
.nav>li>a {
display: none;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
display: block;
}
demo
If you want to remove all of the tabs, and just show the content, you could possibly edit the templates or use only the first rule above (so the tabs are always hidden active or not).
I too was looking for way to remove all the tab headers. Here's what I found was needed:
.nav>li>a,
.nav-tabs {
display: none;
}
The second line was necessary to remove the solid line at the bottom of the tab headers
Related
I'm writing an Ionic framework "sidemenu" type of app (based on the sidemenu demo/starter) that allows the user to choose a theme (basically, the bars and buttons colors).
The problem is when an user clicks a button to change dynamically the theme, it only changes the color of the menu's header and not the color of the views header (stays always in the first color of the array).
Here is a codepen example (just click on the "CHANGE COLOR" button on the side menu):
http://codepen.io/anon/pen/oXqQqm
NOTE: the variable $scope.temabar starts with the "ionic color positive" ($scope.temabar = 'positive';) and is changed when the button "CHANGE COLOR" is clicked.
Can anyone tell me what i'm doing wrong?
Thanks
Well you code pen does not work so I can't tell you what is wrong but if you want to change classes dynamically I would simply use ng-class directive. It is simple, easy, fast, and works. If you are already using ng-class please fix the codepen and I will update my answer :D https://docs.angularjs.org/api/ng/directive/ngClass
and an example:
http://codepen.io/sevilayha/pen/onfrd
HTML:
<div class="container" ng-app="classApp" ng-controller="mainController">
<div class="page-header">
<h1>Dynamic Angular Classes <small>String Syntax</small></h1>
</div>
<div class="row">
<div class="col-xs-6">
<!-- FORM STUFF =========================== -->
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type Your Class" ng-model="superClass">
</div>
</form>
<p>Try:</p>
<ul>
<li>text-danger</li>
<li>text-success</li>
<li>text-danger</li>
<li>bg-primary</li>
<li>bg-info</li>
</ul>
</div>
<div class="col-xs-6">
<!-- NGCLASS EXAMPLE ============================ -->
<div class="jumbotron text-center">
<h2 ng-class="superClass">
Stuff Stuff
</h2>
</div>
</div>
</div>
</div>
CSS:
.bubble {
animation:pulse 1s infinite;
-webkit-animation:pulse 1s infinite;
}
#keyframes pulse {
0% { transform:scale(1); }
25% { transform:scale(2); }
75% { transform:scale(1); }
}
#-webkit-keyframes pulse {
0% { -webkit-transform:scale(1); }
25% { -webkit-transform:scale(2); }
75% { -webkit-transform:scale(1); }
}
JS:
angular.module('classApp', [])
.controller('mainController', function($scope) {
});
I have a problem. I have Index page where i load different pages in <div ng-view></div>.I have sidebar, so while im waiting that ng-view load page sidebar goes on left side and i dont want that.
In index i have <div ng-view></div> and right side menu:
<div class="col-lg-3 col-md-3">
<div class="right-sidebar">
#foreach (var item in Model.SideAccountBanners)
{
<div class="promo">
<a href="#item.LinkTo">
<div class="image">
<img class="resize" src="#item.BannerPath" alt="" />
<h1 class="title">#MvcHtmlString.Create(Html.Encode(item.Title).Replace("-", "<br />"))</h1>
<p class="description">#MvcHtmlString.Create(Html.Encode(item.Description).Replace("-", "<br />"))</p>
</div>
</a>
</div>
How can i set default size for that <div ng-view></div> or set something like document ready? idk
You should be able to do this with css:
[ng-view] {
min-height: 100%;
}
Something like the above.
EDIT: If you have multiple ng-views you will want to change the css.
How can I with use of AngularJS Material Design lib achieve page structure such as described in the official Layout structure guideline and exemplified in the screenshot below? I want to have centralised card breaking the edges of the page toolbar. Codepen example would be highly appreciated.
Edit: related thread: Angular Material Design layout
I figured I'd post this to help others trying to do the same thing with Materialize CSS. You can change the height of the nav-bar, and the size/placement of card.
Demo
HTML
<nav>
<div class="nav-wrapper">
<i class="material-icons">list</i>
</div>
<div class="nav-wrapper">
</div>
</nav>
<
<<div class="row" id="card-placement"> <!-- id added here -->
<div class="col s12 m8 offset-m2">
<div class="card grey lighten-5">
<div class="card-content grey-text text-darken-1">
<h5 class="head">Title</h5> <!-- class added here -->
<div class="divider"></div>
<p>Stuff goes here</p>
</div>
</div>
</div>
</div>
CSS
/* Moves card up into navbar */
#card-placement{
margin-top:-60px
}
/* Moves Title position up to be level with nav bottom */
.head {
margin-top: -2px;
}
nav {
color: #fff;
background-color: #ee6e73;
width: 100%;
height: 112px;
line-height: 56px;
}
.nav-wrapper {
margin-left: 20px;
}
You can easily do this with a little CSS
.card_position{
margin-top:-70px
}
Add this class to the card element.
I'm building an app using Ui bootstrap to integrate some bootstraps components with AngularJs. I need to use a modal panel but concretely the predefined size 'lg' (large) is not big enough for what I need. So I need to customize. Reading the docs, to customize you need to pass a css class when you open the modal using the property 'windowClass'. So I have created a Css class called 'modal-huge' as follows:
.modal-huge .modal-dialog{
width: 80%;
}
.modal-body
{
height: 80%;
}
Then I pass this class as a parameter when I open the modal panel:
var modalInstance = $modal.open({
templateUrl: 'productDetail.html',
controller: 'ProductDetailController',
windowClass: 'modal-huge',
resolve:{
productDetail: function (){
$scope.hideLoader();
return response;
}
}
});
I used percentages for both width and height to have a responsive design, so they adapt to the size of the screen taking in account the size of the parent element.
My problem is that is working fine only for the width, but not for the height. For height is only considering the changes if I give the size in pixeles (px), but not if I give a percentage, which breaks the responsive design. Any idea what can be wrong or some way to fix it? Thank you very much!!
I display the rest of the code in case it helps you.
The modal panel code:
<div>
<script type="text/ng-template" id="productDetail.html">
<div class="modal-header">
<h3 class="modal-title">Product</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">OK</button>
<button class="btn btn-warning" data-ng- click="cancel()">Cancel</button>
</div>
</script>
</div>
And the body where I have included the modal panel called 'productDetailPanel'
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container- custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" > </div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"> </div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng- if="loader.loading">
<p>{{loader.loadingMessage}}</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng- include="'partials/content/panels/login.html'"></div>
<div id="productDetailPanel" data-ng- include="'partials/content/panels/productDetail.html'"></div>
</body>
In order for % height to work you have to set a height to the parent element as well.
In the .modal-body example the parent is .modal-content which in it's place has .modal-dialog as a parent.
Try something like this
.modal-dialog, .modal-content {
height: 100%;
}
.modal-body {
height: 80%;
}
Or check for similar questions Set bootstrap modal body height by percentage
I want use ng-class to conditionally add a class to the accordion-heading, but it appears that not even setting a class explicitly on the element gets preserved. I have this:
<div accordion close-others="true">
<div ng-repeat="currItem in items" accordion-group>
<div accordion-heading class="myClass">My Heading {{$index}}</div>
<div class="accordion-inner myClass">asdf asdf asdf</div>
</div>
</div>
And the fiddle: http://jsfiddle.net/Zmhx5/1/
When I inspect the accordion heading element, the class myClass is nowhere to be found. Is there some reason I can't add classes to the accordion heading?
You can put the CSS inside the directive accordion-heading tags:
<accordion-heading>
<div class="myClass">My Heading {{$index}}</div>
</accordion-heading>
In Angular UI Bootstrap, they have created a directive for accordion-heading. Template for this is written in ui-bootstrap-tpls.js. Try to modify directive for accordion-heading.
I ran into the same issue trying to conditionally apply a background color to the heading with ng-class. This is a bit of a workaround, but it does the trick.
First we need to remove the padding from the heading. If you inspect it, you'll see that it generates a div with a .panel-heading class and a padding: 10px 15px (see note below). The padding is what causes issues when trying to apply a background to a nested div, so lets remove it.
.panel-heading {
padding: 0;
}
Now we can add our nested div and give it the same padding to get back our previous look.
<accordion-heading>
<div class="myClass" style="padding: 10px 15px">My Heading {{$index}} </div>
</accordion-heading>
Here's the updated jsfiddle
Note my code above is from a different version of ui-bootstrap. The classes were slightly different in this jsfiddle, so you will see a slightly different solution. The concept, however, is the same.
you could just apply your CSS to an outer div like this:
HTML:
<div ng-app="myApp" ng-controller="MyCtrl">
<div accordion close-others="true">
<div class="myClass" ng-repeat="currItem in items" accordion-group>
<div accordion-heading>
<div>My Heading {{$index}}</div>
</div>
<div class="accordion-inner">asdf asdf asdf</div>
</div>
</div>
</div>
CSS:
.myClass {
background-color: gray;
color: black;
}
.accordion-inner {
background-color: green;
color: black;
}
JS:
angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function ($scope) {
$scope.items = [{}, {}, {}, {}];
});
then, change it to use ng-class and it should work just fine
pd: (Sorry about the bad english)