ngTagsInput issue with ng-invalid style - ng-tags-input

I'm using https://github.com/mbenford/ngTagsInput.
I created a basic form with a url and a tag-input field that is required.
Since it's required, i used the attribute min-tags="1"
I used it in conjonction with bootstrap stylehseet.
When displayed, the field appears with a red shadow border (since it is empty), even before any submit of the form. This is really annoying, is there any workaround ?
Validate the field only after form submission ?
Removing min-tags="1" and find another way to check the required aspect.
Playing with css to discard those styles applied to this .ng-invalid .tags
Thank you
Edit :
sample code :
<tags-input min-tags="1" ng-model="mytags"></tags-input>
Have done a plunker : http://plnkr.co/edit/EQcYfr4vLpkeJESho3GL?p=preview

You can simply use a custom class to handle the pristine state:
CSS
.custom-tags.ng-pristine .tags {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
border: 1px solid #ccc
}
HTML
<tags-input min-tags="1" ng-model="mytags" class="custom-tags"></tags-input>
Working Plunker
Also, Angular 1.3 isn't officially supported yet. This is particularly important here because both pristine and dirty states won't be correctly set if you use that version of the framework.

Related

white input background on iphone, can't get it away

Is anyone familiar with a white background on an input on iPhone ?
I am trying to make an input without any styling, so with a transparent background.
Everywhere it works fine except on the iphone.
What I've tried already is
background: none;
background-color: none; or background-color: transparent; (tried both)
da
-webkit-appearance:none;
none seems to work. Anyone knows what the problem might be?
I tried it on an iPhone 6 with iOS 10, real device and simulator, using
<input style="background: transparent; border: none;" type="text" />
There doesn't seem to be a problem with that. The input is fully transparent.
Please check the inspector to see if any other style declaration is overwriting yours.
Do this in the "computed styles" section of the inspector and check the background or background-color property. It will tell you which declaration is used to render the element. You can jump directly into this declaration by using the little arrow, see the screenshot from chrome inspector
chrome inspector screenshot
Try to avoid using !important because this will mess up your code and it is not a good practice. Use better qualified selectors instead.
Use background: transparent!important; or apply id to the input field like:
input type="text" id="search">
Css:
input#search{
background: transparent;
}
The solution in this case was to put
all: revert !important;
before any other input styling. It probably got overwritten by something in the framework I use.

different jquery ui buttons at the same time

Is there a proper way to have 2 differently styled jquery ui buttons on the same page?
I am able to copy css around for the second button but there are a lot of different !important styles that I keep needing to add a second !important after the first in order to change the style.
for ex:
.ui-state-active {
background:none !important;
background-color:#E1E1E1 !important;
color:#000 !important;
}
I will then have to go and add right after (and it needs to be after
.new-theme.ui-state-active {
background:none !important;
background-color:red !important;
color:#000 !important;
}
the problem is these important styles are all over for each state so I have to mind where they go. Is this normal or is this usually handled a different way?
Are you using an older version of jQuery UI that requires you to use !important to override their styles? Newer version have fixed this: Use of !important in jquery-ui.css should be avoided.
If you can/are using a newer version, try getting rid of !important and instead rely on selector specificity to get your desired results.
I would recommend using jqueryui-speciffic css. Except difficulties with different button stylings, there may be performance problems while rendering larger amounts of buttons.
This resource is relatively old but I found it very valuable while using jqueryui css.

Jquery-ui transfer effect misses target

I have a jsfiddle to show what I'm trying to do: http://jsfiddle.net/n9bSC/3/
The jsfiddle works well and does not demonstrate the bug.
In my actual code, the transfer finishes directly below the target (instead of directly at the target).
I've tried removing the float, adding various "position" styles, etc.
Any thoughts on what could be causing the behavior that I've described?
I don't fully understand this, but I think the problem is fixed.
Our CSS had:
body{
position: relative;
}
So I now change that to "inherit" on the page where I'm doing the jquery-ui transfer effect.
Then, I use conditional CSS for only IE7 to do this:
.joyride-tip-guide {
margin-top: -10px;
}
(I'm using Joyride and noticed that changing the body position messed up the Joyride tour step positioning for Internet Explorer 7.)

z-index not properly rendered on iPad and Google Chrome 22

I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!

Jquery UI breaks layout in ie7 & 8

I developed a good site layout which works like a charm in Webkit and FF based browsers... but in IE 7 and 8 everything get broken up like.
I've never seen so much difference between Safari/Chorme and IE. I tried different DOCTYPEs but there was no difference.
If I remove all the jquery css everything works fine.
You can see it working on [removed]
Can anyone hint me on how to solve this mess?
You have a compatibility issues, I think you need to override the ui-state-default and .ui-state-hover classes on the buyitui.css file to fit IE.
You can use firebug in firefox to go throught the css files.
To overide the css, create one css file and put all the overrides on this file and place it on the bottom of all the css files. Assuming you make sure you are not using inline style sheet.
EDIT:
You need to override this three:
<div class="clear"/>
<div class="separator" style="width: 950px; margin-left: auto; margin-right: auto; float: right;"/>
<div id="pie" style="float: right;">
The Problem seems on the clear class you have above the separator. When you do clear both, all the floating is cleared and the separator is getting up of the page with the height exanding almost all over the page.
Try to change this and you will see the changes:
This could not be the exact solution, but it really points out the problem on your pages.
on the clear class
remove the clear:both; or make it clear:none;
on the separator class
add float:right and margin-right:200px;
on the pie id
add float:right; and margin-right:200px;
the jquery accordion was what was breaking everything, regeneratd and problem solved (just the regular no standars on IE)

Resources