I am trying to use the HTML Select tag along with AngularJs using the ng-options directive to create a drop down options menu. On top of this I am using Bootstrap 3. I also have ui-bootstrap imported into the project.
Everything works functionally but I have an odd issue where when a user opens the Select dropdown for the first time after visiting the page then the last option in the drop down menu is cut off as in this image:
Once the user selects something and selects the drop down again then everything displays properly.
Here is the code I am using:
<!-- Select -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectThemePark">Theme Park</label>
<div class="col-md-4">
<select id="selectThemePark" name="selectThemePark" class="form-control"
ng-model="tip.theme_park_id"
ng-options="themepark.id as themepark.theme_park_name for themepark in all_themeparks | orderBy:'+theme_park_name'">
</select>
</div>
</div>
I am not a web developer by trade so I'm not sure if there is something I am doing wrong with the HTML select tag or if there is a CSS quirk in Bootstrap 3 that I need to overwrite for the Select tag? Any pointers to what might be causing this behaviour?
I've had a time using bootstrap with angular around drop down menus. From what I have seen part of the issue is associated to the javascript interacting with the DOM once the page has rendered. Remember angular/js is applied after the DOM is rendered. The reason it is working after the click event is because the menu is refreshing and rebuilding the DOM to account for the injected items(options). This has been a huge issue for me with drop downs. One thing that I have done to correct this build my menus/navigation in an angular directive using angular transclude. This allows me to attach the menu at the time angular is initialized. You may want to give the transclude directive a look. There are a number of blogs and articles out there discussing this topic. Just search for bootstrap angular drop down transclude. There is also a SO question around drop downs not working in angular here. Hopefully this will help get you on the right track.
Related
i like to confess that i am not very good in angular and still learning. i have to load huge data and has to show by dropdown. i would prefer if i could do the pagination at dropdown end. i am working with a custom dropdown which is good and taken from this site http://developers.dss.ucdavis.edu/angularjs-serachable-multiselect-dropdown-directive/
but the above custom multi select dropdown lack one feature for showing pagination link. so the problem is user can not show minimum data and click on other link on demand to load next set of data. just wonder anyone mind to add code in the custom directive which add pagination feature there.
so at a time i can load 20 data and click on next pagination link to load next 20 data. i have seen people already developed angular pagination directives. here is one similar link http://angularjs4u.com/pagination/top-5-angularjs-pagination-demos-2014/ hence i am new in angular so do not understand how to add custom pagination directive in another custom multi select dropdown directive.
it will be really good help if some one show me how to achieve it. thanks
With the same UI Bootstrap that they use in that blog there is a pagination directive.
Here's a Plunkr
A few key points here are:
The normal ng-repeat is set as filtered variable to allow for update of search filter along with paginated.
ng-repeat="item in filtered = (allItems | filter: ...
In the same repeat after the filter you set a "limitTo" to set pagination on the list
... ) | limitTo:limit:begin
Then you just need to follow the ui bootstrap pagination
<uib-pagination total-items="filtered.length">
I'm trying a pretty unusual approach of rendering a UI Bootstrap tab via AngularJS.
What I'm trying to do is:
Custom directive -- (That creates a) --> UI Bootstrap Markup -- (That renders) --> A Tab
I know that two directive shouldn't edit the same DOM node, so I used
- Priority attribute
- Terminal attribute
To allow my directive to be the first ones that are compiled and only then the Bootstrap directive should work on the DOM node.
My initial markup is something like:
<mytabcontainer>
<mytab title="Tab">Content</mytab>
<mytabcontainer>
That will convert to this Bootstrap markup
<tabset>
<tab heading="Tab">Content</tab>
</tabset>
I correctly transform the custom markup to the Bootstrap one, but it doesn't get correctly displayed.
Here is a Fiddle that shows my current progress: Fiddle
Unfortunately this is the only approach I can use because of previous decisions so please don't just tell me to directly use Bootstrap markup
I am new to AngularJs and javascript. I have a text box in the dynamically generated angular js tabs. I dont want the value to refresh every time I click on the other tabs. Is static tabs the only option or is there a work around? Just an example fiddle.
Js Fiddle
for your input use a different ng-model for your 3 templates.
<input type="text" ng-model="myModel1">
so you will be able to change tabs and keeping input.
I am trying to create Master Details in table
here is the plnkr Code
but as i start putting filter for the ng-repeat the dom rendering behaves weird
click the + button to expand row and the search the textbox
am i doing some thing wrong
My guess is that ng-repeat-end and ng-if do not play well together. If you place the ng-if in the <p> element, your example is working. Of course this has the (undesired?) effect of allways including the details row in the DOM, event though it will be hidden.
I am trying to get a ng-click event to fire correctly when integrating the Angular Kendo UI.
The following Plunker shows a working example, click the button click me and a modal window appears, however if I add the kendo-grid attribute to line 18 of index.html then the pop up does not work. e.g. changing:-
<table>
to:
<table kendo-grid>
Then the modal popup does not work. I suspect that when the grid is rendered then angular loses the binding. Not sure how to fix it. Can anyone help?
The problem is the angularjs-kendo labs master file does not support command binding and a couple of issues have been raised.
Basically you need to take the javascript from the compile-kendo-grid-rows
See working plunker.