I am following slack app example behavior of comment ,I want to add comment inside
<ion-content>
<!-- start comments from bottom and and every entry from bottom to top scroll up and currently automatically there is <div> after content with style : transform: translate3d(0px, 0px, 0px) scale(1); which set it up at top by default-->
</ion-content>
Please let me know the any material which help me to sort out.
Regards
Shivam
Related
Ionic 1.2
I'm trying to change the background color of the tab bar on a specific screen in my app where I have a text input sitting on top of the tab bar, similar to how Twitter's tab bar looks (see image below).
In other words, I want to change the background color of my tab bar from, say, black to white on a specific screen and otherwise keep the tab bar the default black color. The idea would be similar to adding a class to a specific screen to change the style of the tab bar.
Any thoughts? Any help much appreciated!
You can do this using ng-style.
1.) tabs.html
Add ng-style="{'background-color': Color}" inside <ion-tabs>.
<ion-tabs class="tabs-icon-top tabs-color-active-light" ng-style="{'background-color': Color}">
//
</ion-tabs>
2.) controllers.js
Add $rootScope as dependency and following $ionicView to each controller (use same color in controllers where you have a text input sitting on top of the tab bar). For each tab choose different color.
$scope.$on('$ionicView.beforeEnter', function() {
$rootScope.Color = 'red';
});
3.) style.css
.tabs {
background-color: inherit;
}
Is it possible to make the whole card a link in Angular material or is there another directive intended for this use case?
You can just put a ng-click on the card and perform your operation.Further you can style the card with hover effects to get the feel of a link.Like this :
HTML:
<md-card ng-click="cardSelected()" class="cardAsLink">
....
</md-card>
JS:
$scope.cardSelected=function(){
console.log("card Clicked");
}
CSS:
.cardAsLink{
cursor: pointer;
}
.cardAsLink:hover{
border : 1px solid blue;
}
Yes you can put an anchor tag around the card. I think it is the better solution because you have the hole functionality of the anchor tag. In Ramblers answer clicking would work fine and if you use the the router the historie would also be korrect, but thinks like clicking with the mouse wheel to open a new tap would not work. The same goes for right mouse click thinks and the navigation preview on the bottom of the browser would also be missing.
I am testing this in IE 11:
Codepen
I am attempting to have the md-tab-body of my md-tabs control flex to the bottom of the page. I have had to include this css rule to get that somewhat working:
#tab-content-0 > div, #tab-content-1 > div, #tab-content-2 > div, #tab-content-3 > div {
height: 100%;
}
If you look at the codepen above, you will see that I get a scroll bar when I do so. What am I doing wrong? I want the tab content to flex to the bottom of the page, the first interior container to just take up however much space it needs and the second interior container to flex to the bottom of the tab content, and if it needs more space, it should have a scrollbar inside.
How do I accomplish this? I think the issue has something to do with the CSS rule above, but I cannot get it to flex at all without it.
Chekc out this pen. I am sure you can do the styling as you did in the other tabs. For this example I just used simple md-tab with label and other simplified elements.
http://codepen.io/next1/pen/qZRpEB
I am working on a project using ionic framework. I want to remove the navigation section from top of login page and set its height full of device's height.
I removed header by setting this directive hide-nav-bar
i.e <ion-view title="Login" hide-nav-bar="true">
Although it is removed but a white space in the place of navigation bar is showing. I want login page's height as full of screen's height but I am not getting any solution.
What is the best approach to fix this issue?
Add hide-nav-bar="true" to your ion-view for that page.
<ion-view hide-nav-bar="true">
then add
html,
body {
height: 100%;
}
Alright I found solution myself.
Just remove this class class="has-header" in the view were you don't want to show header. And it will be fixed.
I am using the YUI multi page calendar on my website. I would like to center this on my web page but I am unsure of how to do this due to the complex CSS I am not used to. I have tried adding margin-left & margin-right: auto but this is not working.
An example of this multi-page calendar can be found here: http://developer.yahoo.com/yui/examples/calendar/calgrp_clean.html
Would somebody be able to help me center this calendar?
Thanks in advance.
This is extremely simple. You just need to define a width for the main div so the margin can center it. You also need to put a div right before the main div closes to clear the months so the main div has a distinct height/width.
Add this style to the main Div:
<div id="cal1Container" class="yui-calcontainer multi" style="margin: 0 auto; width: 500px; float: none;">
And before this Div closes add this
<div style="clear: both;"></div>
Now it works! Floats are pretty confusing at first, but often that's something that needs to be done. Other than that it's basic CSS.