Fieldset disabled doesn't work on IE - angularjs

I am using angularjs with fieldset
<fieldset ng-disabled="true">
Currently, by some google search and trying some workaround for this issues but it still not work in disabled mode:
I still can edit input field while it's disabled
Anyone has the same problem and any idea for this ?
IE version: 11.0.14393.0
Thank you

Try this workarround:
fieldset[disabled] {
pointer-events: none;
}

Related

how to disable the week # hover on angular-bootstrap-calendar

I am using angular-bootstrap-calendar but a do not want that hover that indicates the number on the left.
Is there a way to disable it ?
Tried using the config parameter calendarConfig.i18nStrings.weekNumber with no effect.
Thanks a lot "!
calendarConfig.i18nStrings.weekNumber = null;
You can put
#cal-week-box {
display: none;
}
in your css for an easy fix, it doesn't look like you can disable it with code.
This should work for the latest version:
.cal-week-box-cell {
display: none;
}
how you can read here

ExtJS 5 textfield bug (Chrome)

I create simple application with window and 3 field:
Fiddle Link (Use Chrome)
When I enter a value in the field, it looks fine.
But when I change the focus,text in field moves down.
All fields work similarly.
After click on trigger (if field has it) text looks fine.
This bug only in Chrome.
IE, Opera, Firefox and Vivaldi work right.
How can I fix that?
It's a known bug for chrome. Take a look here for the workaround:
https://www.sencha.com/forum/showthread.php?301227-Visual-combobox-bug-in-Chrome-43.0.2357.65-m&p=1101244&viewfull=1#post1101244
Css fix:
.x-form-text { display: inline; }
Demo here: http://ext4all.com/post/extjs-5-textfield-chrome-bug-fix.html

How to disable remove icon in ui-select2

Is there a way to disable the icons in ui-select2? I am using ui-select2 in angular js, which is like adding tags while posting a question on stackoverflow:
How can I disable remove icon conditionally?
Official website of ui select2
[Edit 2018-11-12] You could always do a "display: none" on the x span:
span.select2-selection__choice__remove {
display: none;
}
You could also use that to disable click on it with pure JS.
And there is also a "locked" option: http://select2.github.io/select2/#locked-selections
You can then control, per data, which one can't be removed from the selection.
Could something like this help you?
Remove span tag in string using jquery
It's not a direct answer, and it's not ui-select2 specific, but it should help you understand how to remove certain elements. You can just add a condition and that's that.
This is also works
span.select2-selection__clear {
display: none;
}

PhoneGap + Angular + IOS = ng-show flashes the content on the screen

When accessing my website built with AngularJS 1.2.0rc1 via the InAppBrowser within PhoneGap 2.7.0 on IOS, the contents of an ng-show flicker on the screen.
<form method="POST" action="" name="manualEntryForm" class="form-inline">
<div ng-show="showErrors && !manualEntryForm.$valid" class="errorMsg ng-hide">
One or more of the following fields are required:
<span ng-show="manualEntryForm.month.$error.required || manualEntryForm.day.$error.required || manualEntryForm.year.$error.required" class="ng-hide">Date needs to be present</span>
...
</div>
...
</form>
It doesn't matter if I default showErrors to false or test it more rigorously (showErrors === true), that block of error content will display and also show the actual error message associated (Date needs to be present).
I'm stumped as to how to address this. Should we not be using the Angular Form Validation within that ng-show? Why is it only causing an issue on IOS/Phonegap InAppBrowser?
I had the same problem. ng-cloak didn't solve the problem, so what solved the issue for me was to add
class="ng-hide"
to each element with the ng-show attribute, and now it doesn't flash the content on ios.
Try using ng-cloak to hide the element during compilation:
http://docs.angularjs.org/api/ng.directive:ngCloak
It might be showing up before the AngularJS compiler has had time to run. And it might only be showing in iOS/Phonegap because the webkit browser in UIWebView is nowhere near as fast as Mobile Safari, let alone a desktop browser.
As a workaround, I ended up removing ng-show, and instead adding an ng-class="{hidden: myCondition}", then defining .hidden { display: none; } in CSS. This removed the flashing.

Responsive facebook comment box

I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>

Resources