I am using angular material version 1.1.1 and angularjs version 1.5.5. But the selected options are displaying top of the page.
<div layout="row" layout-align="space-between center">
<span>What is your favorite weapon?</span>
<md-select ng-model="weapon" placeholder="Weapon" class="md-no-underline">
<md-option value="axe">Axe</md-option>
<md-option value="sword">Sword</md-option>
<md-option value="wand">Wand</md-option>
<md-option value="pen">Pen?</md-option>
</md-select>
</div>
Is there any fix for this issue?
Please find the following screen shot:
Related
I am facing a strange behaviour of IONIC 1 IOS application in IOS 11.0.3 .
I had a list of Item and which I rendered on screen via using ng-repeat via using following code. i.e
<div class="list-container" ng-cloak>
<div ng-repeat="message in messageCtrl.messageList track by $index" ng-class="messageCtrl.checkClass
(message);" class="messages" ng-cloak>
<div class="message" ng-cloak>
<span ng-cloak>
<a href="javascript:void(0);" ng-click="goToSechduleScreen(message, 'present');" ng-cloak>
{{ message.message }}
<strong ng-cloak>{{ message.annotation }}</strong>
<span ng-cloak class="scheduleMessage" ng-if="messageCtrl.doesMessageIsScheduled(message
);"><i class="icon ion-clock"></i></span>
</a>
</span>
<div class="datetime" am-time-ago="message.date_created" ng-cloak></div>
</div>
</div>
</div>
The above code is working fine in all IOS device which is running on IOS 10 or lower. but in IOS 11.0.3 some "ng-repeat" item are not displayed .when I scroll up and down sometime Items are visible or some not.
Please check following screen-short for better clarity.
When some items are displayed and some items are not,
When all items are displayed sometime when I scroll up and down,
when just only single item displayed and rest of item are not displayed
Any kind of help or suggestion is appreciated.
Thanks in advance.
I've installed a Angular UI Bootstrap 2.5.0 package in my visual studio and I'm trying to perform a carousel operation, but it doesn't work at all. Following is my code.
<div class="panel-body" id="tblSubs" ng-controller="ControllerName">
<carousel interval="myInterval">
<slide ng-repeat="id in code">
<h3 class="text-center">{{id.Name}}</h3>
<p>{{id.Contact}}</p>
<p>{{id.Info}}</p>
</slide>
</carousel>
</div>
I'm able to get the data but the data doesn't come in carousel.
Any help would be appreciated.
Since version 0.14.0 you need to add the uib prefix to some of the directives, enter uib-carousel instead of carousel etc..
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
I am trying to implement addthisevent into my jqm application (1.4), but I have two issues.
The Link/Button doesn't appear. Looking with Firebug shows that the css class isn't loaded as hidden.
After manually activating the visibility using firebug, the link doesn't do anything.
Does anyone have experience with integrating addthisevent into a jqm app? Is there anything I have to be particularly careful of?
Many thanks in advance.
It appears that the jQM CSS interferes with AddThisEvent CSS. One solution is to add data-role="none" to the link which tells jQM to leave the link alone and not to enhance it.
<a href="#" data-role="none" title="Add to Calendar" class="addthisevent" rel="external">
Add to Calendar
<span class="_start">10-05-2014 11:38:46</span>
<span class="_end">11-05-2014 11:38:46</span>
<span class="_zonecode">38</span>
<span class="_summary">Summary of the event</span>
<span class="_description">Description of the event</span>
<span class="_location">Location of the event</span>
<span class="_organizer">Organizer</span>
<span class="_organizer_email">Organizer e-mail</span>
<span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
<span class="_all_day_event">true</span>
<span class="_date_format">DD/MM/YYYY</span>
</a>
Here is a DEMO
Is Simpledialog2 not supported select menu in jQuery Mobile ?
Because when I use select menu in Simpledialog2, I get error like as under,
"Uncaught TypeError: Cannot read property 'jQuery1910010748725151643157' of undefined"
And if I do not use select menu than it's working fine, how strange it is.
I am trying without select menu as under, It's working fine.
<div id="inlinecontent" style="display:none;">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label>My Label</label>
<input value="myval" type="text">My Value</input>
</fieldset>
<a rel='close' data-role='button' href='#'> Close </a>
</div>
</div>
And now I am trying with select menu, I get Uncaught Type Error in console and it's not working :(
<div id="inlinecontent" style="display:none;">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</fieldset>
<a rel='close' data-role='button' href='#'> Close </a>
</div>
</div>
My js code as under,
$(self.el).find('#inlinecontent').simpledialog2({
mode: 'blank',
headerText: 'My header text',
headerClose: true,
blankContentAdopt: true,
blankContent : true
});
Can any one help me to fix this?
Any help appreciated.
If possible dont use Simpledialog2 with jQuery Mobile. Last version was made to work with jQuery Mobile 1.0.1. That was a long time ago and a jQuery Mobile has changed a lot since then.
You should use jQuery Mobile native dialog or native popup instead. You will get same functionality and unlike Simpledialog2 these are not 3rd party plugins.
One of possible reasons why this is not working because jQuery Mobile don't support 2 popups at the same time. When select is opened its will show a popup (unless it is turned off, but default state is popup select) and because Simpledialog2 is already a popup it will throw an error.
Could you please guide me (an example is much appreciated) as to how i can achieve the Slide up effect on a tag like the one in jQuery 1.9.1 using jQuery MOBILE 1.3.0.
I need to do like the 1st example in this page http://api.jquery.com/slideUp/
I read the slideup but how to do it for a tag.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
I know this would be simple but i am new to jQuery. Just couldn't get it done in the mobile API.
Is this what are you looking for? Demo
Markup
<a data-role="button" id="clickme">Click here</a>
<br/>
// this div will slideup.
<div id="test">
<img src="anyimg.jpg" alt="" />
</div>
Code
$('#clickme').click(function () {
$('#test').slideUp('slow'); // or fast, or leave it blank
});