I've got a requirement to render input type submit in UL > LI > INPUT. Hence the following HTML and CSS:
http://jsfiddle.net/d45BY/1/
<ul class="listCell">
<li class="listCell bulletPoint">
<input id="cmd1" class="" type="Submit" value="Cmd1Text" name="cmd1">
</li>
<li class="listCell bulletPoint">
<input id="cmd2" class="" type="Submit" value="Cmd2Text" name="cmd2">
</li>
<li class="listCell bulletPoint">
<input id="cmd3" class="" type="Submit" value="Cmd3Text" name="cmd3">
</li>
<li class="listCell bulletPoint">
<input id="cmd4" class="" type="Submit" value="Cmd4Text" name="cmd4">
</li>
</ul>
.bulletPoint {
list-style: disc outside none;
}
This renders fine on most browsers except IE 7 in compatibility mode. Im running IE8.0.7601.17514.
When I select Browser mode IE7 and Document mode IE7 standards the following happens:
Items 1 and 2 render fine. 3 goes to the left and then 4 goes even further to the right. Just wondering if anyone has seen this issue or can replicate it.
The problem was that I had the input types rendered to look like links. For some reason it always rendered the 3rd and subsequent item in all different places. The fix I did was the following"
text-align: left
What that does is that it keeps the text inside the button to left. Problem solved. Hope this helps someone.
Related
I'm stuck. Cannot figured this out. This question is very simple to show, but I'm not really sure how to put it as a question, therefore I'll try my best.
First, here's the layout of my whole app (The problem lies in the Header.jsp):
<jsp:include page="../home/Header.jsp" />
<jsp:include page="../home/Modals.jsp" />
<div data-ng-view data-save-scroll-position data-position-relative-to-menu></div>
<jsp:include page="../home/Footer.jsp" />
The problem is very simple. I have the following data-ng-class in the data-ng-view section that change a tab to active if something is true (The problem is it won't work in one scenario even though it displayed true in the tab name):
<ul class="nav nav-tabs">
<li role="presentation" data-ng-class="tab.isSelected ? 'active' : ''" data-ng-repeat="tab in ctrl.tabs"
data-ng-click="ctrl.fetchBIReports(tab)">
</li>
</ul>
In the JSP that use data-ng-include for the above markup, there's a side nav to change to this page. Once clicked this side-nav, it highlighted the tab 'active' as expected (trying not to include the whole jsp):
<div class="side-navbar">
<ul>
<li class="{{ ctrl.navigate.path == 'bi/schedule' ? 'active-link' : 'normal-link'}}">
Schedule Reports
</li>
</ul>
</div>
<div class="content-right" data-ng-include="ctrl.navigate.path"></div>
content-right includes the JSP mentioned in the second markup.
So far, so good. Here's a demo of it working (including both side-navbar and content-right):
The problem is, in my Header.jsp, there's a nav bar that takes me to the same page. If it is clicked from a different page with different controller, then it works. But if I'm in the current controller and click that nav bar link, then data-ng-class does not take 'active' as its class. Here's the markup for the Header.jsp for that link:
<li class="dropdown" data-roles="['ROLE_ADMIN']">
<a href="#/bi" class="dropdown-toggle" data-toggle="dropdown" data-ng-click="ctrl.changeNavigation('bi/schedule')"
role="button" aria-haspopup="true" aria-expanded="false">BI Management<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Schedule Reports</li>
</ul>
</li>
Here is the demo of it not working even though it is printing out true in the UI:
The only problem is with this UI. All the data are populated. Records are displayed for the correct tab. Even side nav-bar is displaying the correct active class.
Your syntax for ng-class is off a bit. The format is "{ '[class-name]': [expression that evaluates to true or false] }". You can have multiple class values separated by commas each with their own expression. When an expression is true, the corresponding class is applied to the element and when it is false the class is removed from the element. The way you have written it would almost work for the plain class attribute, but you would need to include the interpolation characters: {{ and }}. Here is a very simple example to illustrate ng-class.
angular.module('app', []);
.red {
color: #fff;
background-color: #e21d1d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<label>
<input type="checkbox" ng-model="applyRedClass" /> Apply 'red' class
</label>
<div ng-class="{'red': applyRedClass}">
This is a simple example of how to use ng-class.
</div>
</div>
I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.
If I start to type in the textbox the autocomplete popup opens with potential matches:
However, if I click on one of the matches nothing happens and the underlying angular model is not updated:
The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:
This is the template I'm using:
<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0">
<ul>
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
</ul>
</div>
This is the relevant front-end code:
<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
<form ng-submit="GetCareers()" class="form form--mos">
<div class="form__row">
<div class="form__col form__col--half-plus">
<label for="MOS" class="form__label">MOS/Rate/Duty Title</label>
<input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>
<div>Current Search Term: {{vm.model.SearchTerm}}</div>
<textarea>{{vm.model.CareerResults}}</textarea>
</div>
</div>
</form>
</div>
Here's our angular model. Note that we're using Typescript in this project:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before:
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.
Scripting Language : AngularJS
My Html Code is :
<li>
<a href="javascript:void(0)">
<label ng-if="show">MyName</label>
<i class="fa fa-pencil" ng-if="show">
<i class="fa fa-trash" ng-if="show">
<input type="text" ng-hide="show" />
</a>
</li>
this above html working in all browser excepting in IE edge..
this functionality done for , when i click on edit icon in list , label will remove and textbox will show with label value ..
its like editing list for whatever i will selected or renamed of that label value .
This html code working fine in (firefox,google chrome excepting IE9 above & Edge).
Tried it with a html validator.
Output is:
Error: The element input must not appear as a descendant of the a
element.
So basically this isn't a valid HTML, it depends on the browsers on how strict they parse your markup. So you might want to use some workarounds in your code to get the same effect you want but not using that kind of markup.
I have a dynamically populated tree list that I have shown and hidden. The problem is randomly, the entire list will vanish. Even things that don't have an ng-show are gone. I have tried pretty much everything and it still has the same effect. I am completely stumped.
<div class="legend" ng-show="legend">
<div class="upper_legend">
<span>Layer Legend</span>
</div>
<div class="lower_legend">
<div style="padding-left: 8px; min-height:10px" ng-repeat="layer in index.currentLayers track by $index">
<img src="images/down-arrow.png" style="cursor:pointer" width="10px" height="10px"
ng-click="index.currentLayers[$index].show= !index.currentLayers[$index].show"/><span
ng-click="index.currentLayers[$index].provenance =!index.currentLayers[$index].provenance;openProvenance(index.currentLayers[$index])"
style="cursor:pointer"> {{layer.name}}</span>
<div class="legend_data" ng-show="index.currentLayers[$index].show">
<span ng-repeat="color in layer.legendColors">
<span style="min-width:50px;height:20px;border-style:solid;border-width:1px;background:{{color.color}}"> </span> {{color.legend}}<br>
</span>
</div>
</div>
</div>
</div>
Does anyone have any idea why that could possible be happening? It isn't consistent either. It only happens when closing the tree and only on the first item clicked (regardless of index of the item). So, if I open and close the 3rd item, closing it will blank out the tree, but I can then open and close item 1 and it is fine every time, unless I close item 3 again. The same happens with any order.
You are missing closing </div> tag. Did you double check this (add it to end of this code block)?
I am using AngularUI tabs as seen in the following sample code below and in this plunker.
http://plnkr.co/edit/YlbrObH4sBlyUFZO2tZh?p=preview
<tabset class="tabbable tabbable-custom tabbable-full-width">
<tab class="active" heading="Latest Customers" href="javascript:;">
<div class="tab-pane active" id="Div1">
Pane 1
</div>
</tab>
<tab heading="Feeds" href="javascript:;">
<div class="tab-pane" id="Div2" href="javascript:;">
<div class="tab-pane active" id="Div3">
Pane 2
</div>
</div>
</tab>
</tabset>
As you can see in the plunker, when the mouse hovers over the "tab", the cursor does not change to your typical pointing finger. The anchor tag that angularui is rendering does not have a href value on it, therefore, it is considered invalid html. if i manually add href="javascript:;" , the cursor works like i want it.
My question is, how can i tell the directive to add a href to the anchor tag? any advice?
Thanks,
Dan
You could add a style that targets the tabs:
.nav-tabs > li > a {
cursor: pointer;
}
just write:
<tabset
class="tabbable tabbable-custom tabbable-full-width"
style="cursor: pointer;"
>
....
Mmh this is weird, I too am using angular-ui tabs in my project. I copied and pasted the exact code you provided and it works just fine.
(see bottom of http://wiredbeast.com/coolframework/docs.html#/activity)
I might remove it later so look quick.
So my guess is that it's something wrong with your bootstrap css. I'm using ui-bootstrap-tpls-0.6.0.min.js, bootstrap.js/css v3.0.0, and https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js for angular