I have the following html:
<div class='contact section-two'>
<input class='info' type='email' name='email' placeholder='email'
value="">
<span class='alerts hidden'>Please enter your email</span>
</div>
but when I check developer tools I'm getting:
<div class='contact section-two'>
<input class='info' type='email' name='email' placeholder='email' value="">
#shadow-root (user-agent)
<div pseudo="-internal-input-suggested" id="placeholder"
style='display:block!important; user-select:none!important;">
abc#gmail.com</div>
<div></div>
</input>
<span class='alerts hidden'>Please enter your email</span>
</div>
How do I prevent the shadow-root element? Also, why the heck is this
shadow element being added in the first place?
when I run the html on localhost it works fine. When I run it live on bluehost I get the shadowhost problem
Related
In This form I have to access the control of formControlName="last" to show errors of it.
<div [formGroup]="form">
<div formGroupName="name">
<input formControlName="first" placeholder="First name">
<input formControlName="last" placeholder="Last name">
<span *ngIf="name['controls'].last.invalid">invalid</span>
</div>
<input formControlName="email" placeholder="Email">
<button type="submit">Submit</button>
</div>
This code has thrown an error 'controls' of undefined(Bold Formatted line).
control could be accessible by form['controls'].name['controls'].last.invalid , but is there any way I could access the control directly by its formGroupName ?
Thanks in Advance
Try this
<div *ngIf="!form.controls.name.controls.last.valid">
Invalid last name !!
</div>
Could you try below snippet
<span *ngIf="form.get('last').invalid">invalid</span>
#sravanponugoti: we cannot use [formGroup] with in angular.
Try this code
<form [formGroup]="form">
<div formGroupName="name">
<input formControlName="first" placeholder="First">
<input formControlName="last" placeholder="Last">
<span *ngIf="form.controls['name'].controls.last.valid">invalid</span>
</div>
<input formControlName="email" placeholder="Email">
<button type="submit">Submit</button>
</form>
I have a simple form that uses Google ReCaptcha v2 to verify. Its working fine on desktop/ipad and iphone on all browsers I have tested so far. The problem I have discovered is that when I click "I'm not a robot" on the smaller iphone screen in portrait mode - the images attempt to display below the form - and as the form is at the bottom of the page - it ends up cutting off like this:
<div class="col-md-6">
<p><b>CONTACT FORM</b>
</p>
<form role="form" id="form" action="form.php" method="post">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
<span class="help-block" style="display: none;">Please enter your name.</span>
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
<label for="message">Message</label>
<textarea class="form-control" rows="7" id="message" name="message" placeholder="Enter message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<div class="g-recaptcha" data-theme="dark" data-sitekey="INSERT DATA SITE KEY HERE"></div>
<span class="help-block" style="display: none;">Please check that you are not a robot.</span>
</div>
<button type="submit" id="Submit" data-loading-text="Sending..." class="btn btn-default">Send Message</button>
</form>
</div>
When I rotate iPhone to landscape - it then displays the images above the reCaptcha widget which is good. But rotate back to portrait it tries to display the pictures below the widget - and cuts off anything below the end of page - and inserts a big white space. Any ideas what I can do to resolve?
I am using the acts-as-taggable gem in a Rails 4 app with an angular frontend. If I use the console it works fine. I have done all the obvious things and I can get it to work by adding this to the create controller:
if params[:tag_list]
droplet.tag_list.add(params[:tag_list], parse: true)
end
The problem is that it should be doing this anyway. Does anyone have any insight as to why it is simply not firing the tag_list.add method automatically? I am uncomfortable using this hack to get it to work.
And yes, I have added :tag_list to the strong parameters.
Update: The form html
<form ng-submit="createNewDropletForm.$valid && createNewDroplet()" name="createNewDropletForm" novalidate>
<div class="form-group">
<label for="name">Title:</label>
<input ng-keyup="keyup()" ng-model="drop.name" ng-model-options="{ debounce: 500 }" type="text" class="form-control" placeholder="Add Droplet Title Here" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea class="form-control" rows="4" ng-model="drop.description" placeholder="Add helpful description of what this droplet tests." required></textarea>
</div>
<div class="form-group">
<label for="tags">Tags:</label>
<input class="form-control" ng-model="drop.tag_list" placeholder="add tags separated by commas">
</div>
<button type="submit" class="btn btn-default">Next</button>
</form>
i've got this code using Jquery Mobile :
<div role="main" class="ui-content">
<form action="/" method="post">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</form>
</div>
The problem is that when i load the page the codes looks like this :
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox">
I've skipped the whole code, the problem is in the
that should not be there.
Any idea about how to fix it?
This problem comes when copying and pasting the source code from their website.
In fact in this way you copy also invisible blank spaces which are converted as by the browser and make the last block go down.
To solve the issue simply remove all the spaces between the tags and all will be displayed correctly.
There are many ways you can remove the automatic default padding.
First
<div style="padding: 0;">...</div>
Second: Define an id for the div tag and set padding to 0 in css
<div id="myID">
#myID{ padding:0; }
So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.