I have a simple form that is inside Angular UI Bootstrap's tabs. Form controls have tooltips associated with them to show errors. I'm using custom event that will toggle tooltip visibility.
The idea is to have tooltip visible on required fields.
With UI-Bootstrap version 1.3.2 and Angular 1.4.8 everything is working fine but since I upgraded to Angular 1.5.3 tooltip is not showing anymore. It will show once I actually type something in the text field and delete it which makes me believe that now requires the model to be initialized.
I have here two plunks that will show exactly what is going on:
Working plunk (with angular 1.4.8) - https://plnkr.co/edit/IkuOdCrcFJ8lBeNA5sSh
<data-uib-tabset>
<data-uib-tab>
<data-uib-tab-heading>Tab 1</data-uib-tab-heading>
<form name="testform">
<input type="text" name="test" id="test"
data-ng-model="test"
data-ng-required="1"
data-tooltip-append-to-body="true"
data-tooltip-placement="right"
data-uib-tooltip="Required!"
data-tooltip-trigger="none"
data-tooltip-is-open="testform.test.$error.required" />
</form>
</data-uib-tab>
<data-uib-tab>
<data-uib-tab-heading>Tab 2</data-uib-tab-heading>
Content 2
</data-uib-tab>
</data-uib-tabset>
Not so working plunk (with angular 1.5.3) - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ
I noticed as mentioned in the comments that there is a class being attached - uib-position-measure. It has 3 styles that are causing the issue:
top: -9999px !important
left: -9999px !important
visibility: hidden !important
EDIT - I'm reorganizing my post now that I've dug pretty deep into this. Still don't think I have a great solution, but at least have some info and options.
Solution 1
Simply remove the culprit class uib-position-measure with javascript and then adjust the top and left styles on .tooltip.
Plunker
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.className = tooltip.className.replace(/\buib-position-measure\b/,'');
}
.tooltip {
top: 42px;
left: 150px;
}
Solution 2
Overwrite the styling that is causing the issue with javascript.
Plunker
<script type="text/javascript">
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.setAttribute("style", "visibility: visible !important; top: 42px !important; left: 150px !important;");
}
</script>
Solution 3
I was able to find where the .uib-position-measure class is created in the ui-bootstrap.js file. I removed !important from the visibility, top and left. After that I was able to fix the issue using css on the .tooltip class.
Plunker
ui-bootstrap.js is the file I created, copied the original over, and modified the uib-position-measure class - it is at the bottom on line 7327.
In style.css I simply added the below:
.tooltip {
visibility: visible;
top: 42px;
left: 150px;
}
Related Issue
I was also able to find an issue on GitHub related to this - https://github.com/angular-ui/bootstrap/pull/5530
Someone removed some inline styles and added them as a class, so that they could be overwritten by CSS instead of using javascript. This may be the best way to handle it - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154. The problem is finding the location of the uib-position-measure inline styling and handling it the same way.
Using popover-popup-delay repositions the element and the class uib-position-measure is no longer active on it.
Related
I am using ui-grid i just want header to be visible and all the rows will be hidden. Can someone guide how to make this change ?
For the same i have created jsfiddle
currently the css is below, i dont know how to change css for this problem :-
.grid {
width: 500px;
height: 250px;
}
If you wanna hide all rows (ONLY USING CSS) just do the following
.ui-grid-viewport{
display:none;
}
.ui-grid{
height:100% !important;
}
jsfiddle: http://jsfiddle.net/nujpd76y/5/
Well, this will permanently hide your rows, if that is what you want. Otherwise if you could just explain your use-case / requirement ... as in what you are trying to do so as we can suggest a more "angular way" to do this. :)
UPDATE:
If you want to hide header text then add following
.ui-grid-header-cell-label{
display: none;
}
jsfiddle: http://jsfiddle.net/nujpd76y/7/
Hope this helps!
I have a html page with this code
<p id="roonnameDiv" >{{chatRoom}}</p>
and an app.js with the following code . It reflects the value corrrectly but if I try to style it with color at runtime it doesnt not reflect on the html page
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.$parent.chatRoom.style = {"color":"green"};
I even tried using ng-color but in vain . Have head using html-unsafe tags t add html5 code to angular variables at runtime , perhaps I could use that to provide style of element but could not find any examples .
Essentially the requirement is of having various styled ( color ,size and fonts ) in roonnameDiv using angular framework
..................Edit .............................
I used the ngstyle as suggested by answers below
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.myStyle = {color: "green"};
however the output text was just plain grey . On exploring it thorugh chorome inspector , I found it is inheriting some styles through body.
Switching off the body color tag just turns the text black instead of green .
Following is the body
<body ng-app="xyz" ng-controller="AppController" class="ng-scope">
This is the body style
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
I want specific style class to apply for different text components without affetcting the overall body style . Could you suggest how to do so ?
You can use ng-style directive.
In Markup
<p id="roonnameDiv" ng-style="myStyle">{{chatRoom}}</p>
In controller
$scope.myStyle = {color: "green", background: "blue"} // Write all the required styles here.
More on ng-style directive at: https://docs.angularjs.org/api/ng/directive/ngStyle
try this
<p id="roonnameDiv" ng-style="chatRoom.style" >{{chatRoom}}</p>
I'm using Foundation in a mobile first project where many elements are hidden based on the browser size, and I'm running into some trouble using Foundation's visibility classes like .show-for-small-only as Foundation applies
display: inherit !important;
to any element which uses these visibility classes. (For example, see line 5808)...
.show-for-small-only {
display:inherit !important;
}
This is causing me issues. Say have an element that I want to .show-for-small-only:
<div class="someElem show-for-small-only">
<!-- Content -->
</div>
Yet I want this element, when shown, to be formatted as a display:inline-block element. Due to Foundation's use of !important, the div is forced to assume it's default display state of block.
Is there any workaround to this, short of declaring my styling as !important too? (I don't want to have to do that though)...
I agree, using !important always feels gross.
Precedence in CSS is given to the element furthest down the tree so to override the Foundation !important property, just target an element further down the tree, like so:
<div class="show-for-small-only">
<div class="someElm">
<!-- your content here -->
</div>
</div>
With the following CSS
.someElm {
display: inline-block;
}
Here's a Plunker for kicks (just remember the items wont show up unless the screen is small).
I hope this helps.
To overwrite inportant just declare it again after the first declaration
.show-for-small-only {
display:inherit !important;
}
.show-for-small-only {
display: inline-block!important;
}
<div class="someElem show-for-small-only">
Content
</div>
I have an AngularJS 1.2.2 web application with a <div> that I show/hide based on some $scope property. Using the ngAnimate module, I animate the showing and hiding of the <div>.
<div id="square" ng-show="showSquare" class="animate-shiny"></div>
I also have a class I want to place on this <div> and for this I use ngClass.
<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>
And as it so happens, sometimes that class gets applied at the same moment as when the <div> is shown/hidden. This causes the show/hide animation to not work anymore, apparantly it finds ngClass more interesting to animate, even though I don't want to use ngAnimate for that animation.
Here's a Plnkr that demonstrates the behavior. Clicking the show/hide button works great, clicking the make cool button works great, but the button that combines these two causes the show/hide animation to break.
How do I fix this? And can I do it without manually addressing $animate?
Thanks in advance!
The problem is that you are trying to animate using the class and not discriminate between when things should animate. That is, your transition effect applies to the class in general, which ng-animate perceives as having to do work whenever that class is referenced. I modified your css a bit to get pretty close, if not exactly, what you want:
#square {
width: 50px;
height: 50px;
background-color: blue;
transition: 0.4s all ease-out;
}
#square.cool {
box-shadow: 0 0 10px 3px green;
background-color: lightgreen;
}
#square.ng-hide-add, #square.ng-hide-remove
{
display: block !important;
}
#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{
margin-left: -80px;
opacity: 0;
}
#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{
margin-left: 0;
opacity: 1;
}
Here is the new plunkr so you can play with it: http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview
If you want to ONLY animate the show/hide and do not want a transition for the color, simply move the transition to the #square.ng-hide-add, #square.ng-hide-remove declaration.
I am using lightbox2 but it hides my page scrollbar while opening, after closing scrollbar it stays hide.
I have checked css, if there is some issue with my blog, please let me know.
I have tried all browsers but same is happening on all browsers.
Link to my page which have problem , you may check this...2
Please help me out..
change your css..
whenever you are clicking on the image class named CSS_LIGHTBOX_FIXED_FRAME has been added to html tag and that class has the following css
html.CSS_LIGHTBOX_FIXED_FRAME {
height: 100%;
margin: 0;
overflow: hidden !important;
width: 100%;
}
remove the overflow:hidden part from above and you will have your scrollbar back