Set iframe or form to be in a fixed position

Having issues with my site where an iframe is contained within a div.

When only one character is entered in the telephone box, validation fails and red warning text is displayed.

Furthermore, after clicking in the email box and pressing tab twice, the form shifts to the left on the second tab press, causing the question text to go out of view.

Is there a way to fix the horizontal position of the form so it remains static?

IFrame snippet:

<div style="border: 0px solid #a1a1a1; width: 450px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="490px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

Access the URL here:

javascripthtmlcssiframe

Answer №1

The reason for this issue is that the width of the iframe you have selected is too small, possibly due to the Industry select box. To fix this, simply increase the width of both the div and the iframe, and the shifting problem will go away.

<div style="border: 0px solid #a1a1a1; width:540px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="500px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

Check out this Fiddle for reference

EDIT

If you want to dynamically adjust the height of the iframe, you can use a helpful jquery library. Simply upload the 

iframeResizer.contentWindow.min.js
script to your server and include it in the iframe page:

<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>

Next, upload the iframeResizer.min.js, include it in the page with the div containing the iframe, and call the appropriate function to resize the iframe:

<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize();</script>

By following these steps, your issue should be resolved. For more information, refer to the GitHub page provided above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to navigate to the home page using a PNG icon without refreshing the page when clicked on, while also utilizing NavLink with a route of '/'?

Here's the code I'm working with: <div key="1" className="menu-item"> <NavLink to="/"> <span className="icon-home3" />&nbsp; Home </NavLink> </div> The Home button functions ...

javascriptreactjsreact-routerreact-router-v4

Guide to activating MySQL query in Express

After creating a Nodejs Express app with a button on the client side, I want to execute a SQL query on the server side when the button is clicked. Is there a method to achieve this? The code in index.ejs: <button onclick='add()'>+1</but ...

javascriptmysqlnode.jsexpress

Update class name in React component based on state change

My current setup involves the setting of active and class flags as shown below: constructor(props) { super(props); this.state = {'active': false, 'class': 'album'}; } handleClick(id) { if(this.state.active){ this.s ...

javascriptreactjs

When using AngularJS with DateRangePicker, I am encountering an issue where my ng-model does not capture the input text value when I select a date

Trying to establish the selected date range in an ng-model called dateRange in the following HTML. The input text field displays the selected value correctly, but dateRange remains null. What steps can I take to address this issue? <!DOCTYPE html> ...

jqueryhtmlangularjsangularjs-directivedaterangepicker

Utilizing JQuery to extract data from a <select> dropdown menu

Is there a way to retrieve the current value of a SELECT tag using JavaScript or jQuery? I have tried using $('select').val(), but it only returns the default value and does not update when changed. Any suggestions on how to solve this issue? $( ...

javascriptjquery

The application encountered an exception and has ceased to respond, displaying a custom error page

I have a .NET application running on IIS 7 that is accessed from IE7. When a specific exception occurs, the page is redirected to a plain .htm page with a back button that should take the user back to the previous page. This exception handling is implement ...

javascripthtml.netinternet-exploreriis

How can I make an HTML textbox in C# MVC flash a background color for one second using TextBoxFor?

I'm currently working with MVC and have the following code in my razor view. @Html.TextBoxFor(x => model.DateTimeStamp, new { @readonly = "readonly", @class=ViewBag.IsLatest ? "latest":""}) I want to briefly change the background color of this te ...

asp.net-mvccssrazor

Discovering the id of the current active tabpane is possible by using

Is there a way to retrieve the id of the currently active tab-pane every time I switch tabs on my page? Depending on which tab-pane is active (tab-pane1, tab-pane2, tab-pane3), I want to store the respective value (tab-pane1 = 1 and so on) in a variable an ...

javascripthtmljquerytabsbootstrap-5

Error: the function is not defined, therefore the variable is being passed

I'm attempting to pass a variable in the URL in order to automatically check a radio button on a different page depending on which link is clicked. However, I keep encountering an "Uncaught ReferenceError: radio_onload is not defined" error. Could th ...

javascripthtmlradio-button

Using Javascript to initialize events based on a variable

This particular plugin is structured in the following way: (function($){ var defaults = { param1:null, param2:null }; var methods = { init:function(params) { var ...

javascriptjqueryoop

What could be the reason for the Checkbox's value not showing up after making changes?

In my React and Material UI project, I am facing an issue where I want to check all checkboxes in a list by simply checking one checkbox in a parent component. Despite passing down the correct value of the parent checkbox through props, the visual changes ...

javascriptreactjsmaterial-ui

"Utilizing the jQuery append method to dynamically insert an SVG element

Currently, I'm in the process of constructing a graph by utilizing svg elements and then dynamically creating rect elements for each bar in the graph through a loop. I have a query regarding how I can effectively pass the value of the "moveBar" varia ...

javascriptjquerysvgattributesappend

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: The issue arises where my contact form is concealed b ...

htmlcsstwitter-bootstrapfootersticky

Is there a way to eliminate spaces from a string using react-native?

As a user of react-native, I've encountered an issue with inconsistent line breaks when inputting long strings on the screen. For example: I aim to achieve consistent string wrapping as shown in the image below: Here is my code. How can I address t ...

javascriptnode.jsreactjsreact-nativestyled-components

How can Rails resize images for display on views?

Is there a way to resize an existing image to specific dimensions without creating multiple versions? Currently, I am using Carrierwave and Rmagick to upload images to my Amazon S3 storage bucket. It generates two versions of the image: the original and a ...

ruby-on-railscssimage-processing

Encapsulate ng-style within quotation marks

I am trying to hide a span if the value of filters[*index*] is empty. var span = "<span ng-style='{ 'display': filters[" + filterIndex + "] == '' ? 'none' : 'inline-block' }'></span>" cell.html ...

javascriptangularjs

Adapting language in real-time: DateTimePicker jQuery Plugin

I am looking to dynamically adjust the language settings of the DateTimePicker jQuery Plug-in (http://xdsoft.net/jqplugins/datetimepicker/) but I keep encountering an "undefined" error for the lang1 variable within the final plug-in function call: <!DO ...

javascriptjquerydatetimepicker

What is the best way to align this form in the middle of a Jumbotron with Bootstrap 4?

<!DOCTYPE html> <head> <title>Destiny 2 App</title> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shri ...

htmlcsstwitter-bootstrap

Illuminate a corresponding regular expression within a text input

I currently have a functional code for testing regex, which highlights matching patterns. However, my challenge lies in highlighting the result within the same input as the test string. Below you will see the HTML and JavaScript snippets along with two ima ...

javascripthtmlangularjsregex

Integrating Facebook login with Cordova using the cordovaOauth plugin

Encountering issues while setting up FB login for my cordova mobile app. A tutorial followed: http://www.codeproject.com/Tips/1031475/How-to-Integrate-Facebook-Login-into-a-Cordova-App#_comments <script src="js/angular.js"></script> <scrip ...

javascriptiosangularjsfacebookcordova