Aligning msform using CSS

Can someone assist me with centering the form (#msform, #msform fieldset) on all browsers while also keeping the image within the border and ensuring that the form does not extend beyond the right border?

JSFiddle

#msform {
    width: 1200px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;

    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;

    /*stacking fieldsets above each other*/
    position: absolute;
}

I would greatly appreciate any assistance with this issue.

javascripthtmlcss

Answer №1

Adjust the width of #msform to 100% or a similar value, and do the same for the img element.

Your code snippet:

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

// Add event listener for 'next' button click
$(".next").click(function() {
  if (animating) return false;
  animating = true;
  current_fs = $(this).parent();
  if ($(this).attr('name') == 'feveryes')
    next_fs = $('#feveryes');
  if ($(this).attr('name') == 'feverno')
    next_fs = $('#feverno');
  if ($(this).attr('name') == 'coughyes')
    next_fs = $('#coughyes');
  if ($(this).attr('name') == 'coughno')
    next_fs = $('#coughno');
  if ($(this).attr('name') == 'previous')
    next_fs = $('#firstField');

  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  next_fs.show();

  current_fs.animate({
    opacity: 0
  }, {
    step: function(now, mx) {
      scale = 1 - (1 - now) * 0.2;
      left = (now * 50) + "%";
      opacity = 1 - now;

      next_fs.css({
        'left': left,
        'opacity': opacity
      });
    },
    duration: 800,
    complete: function() {
      current_fs.hide();
      animating = false;
    },
    easing: 'easeInOutBack'
  });
});

// Add event listener for 'previous' button click
$(".previous").click(function() {
  if (animating) return false;
  animating = true;

  current_fs = $(this).parent();
  previous_fs = $('#firstField');

  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  previous_fs.show();

  current_fs.animate({
    opacity: 0
  }, {
    step: function(now, mx) {
      scale = 0.8 + (1 - now) * 0.2;
      left = ((1 - now) * 50) + "%";
      opacity = 1 - now;

      current_fs.css({
        'left': left
      });
      previous_fs.css({
        'transform': 'scale(' + scale + ')',
        'opacity': opacity
      });
    },
    duration: 800,
    complete: function() {
      current_fs.hide();
      animating = false;
    },
    easing: 'easeInOutBack'
  });
});

// Add event listener for 'submit' button click
$(".submit").click(function() {
  return false;
});
/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background: url('http://thecodeplayer.com/uploads/media/gs.png');
  background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('http://thecodeplayer.com/uploads/media/gs.png');
}

body {
  font-family: montserrat, arial, verdana;
  overflow-x: hidden;
}


/*form styles*/

#msform {
  width: 100%;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;
  position: absolute;
}

#msform fieldset:not(:first-of-type) {
  display: none;
}

#msform img {
  width: 80%;
}

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}

#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
... (truncated for brevity) ...

</script>
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js"></script>

<form id="msform">

  <fieldset id="firstField">
    <h2 class="fs-title">Do you have a fever?</h2>
    <input type="button" name="feveryes" class="next action-button" value="Yes" />
    <input type="button" name="feverno" class="next action-button" value="No" />
    <br><input type="button" name="previous" class="previous action-button" value="Reset" />
  </fieldset>

  <fieldset id="feveryes">
    <h2 class="fs-title">Do you have a cough? Do you have a cough? Do you have a cough? ... </h2><br><img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_(business).svg/1280px-IMG_(business).svg.png">
    <input type="button" name="coughyes" class="next action-button" value="Yes" />
    <input type="button" name="coughno" class="next action-button" value="No" />
    <br><input type="button" name="previous" class="previous action-button" value="Reset" />
  </fieldset>

  ... (truncated for brevity) ...
</form>

Answer №2

The reason for this issue is the width property; to fix it, try implementing the following code:

#msform {
    max-width: 1200px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}

Additionally, don't forget to add max-width: 100%; to your image in the upcoming step.

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

Tips for verifying the inclusion of the + symbol in the country code in Angular 7

My form includes a text box where users can input a country code preceded by a + sign. If a user enters only numbers, we need to restrict that action and prompt them to enter the country code with a + sign, for example: +91, +230, ... I've been tryin ...

javascriptangularangular7

Enforcing precise rounding for input-group elements in Bootstrap with integrated form validation

Is there a way to make the last input-group element rounded when a validation message is present while combining Bootstrap 5's input-group with form validation? Additionally, can different validation messages be provided for first & last name in ...

htmlcssformsvalidationbootstrap-5

Animate jQuery Images - Transform and smoothly reveal element

Hey there! I've managed to create a color switcher that gives a sneak peek of different themes. Currently, it simply switches the image source and loads the new image. But I'm curious if it's possible to add a fadeIn effect to enhance the t ...

javascriptjquery

When the page first loads, the slider is responsive, but it does not adjust

I installed the Moving Boxes plugin and customized it to create a full-width image slider. While it works well when the page loads, I'm facing challenges with making it responsive on resize. It appears that the JS script sets fixed widths upon load, w ...

javascriptjquerycsssliderresponsive-design

Creating a sleek animation with JQuery for a dynamic-width div

Here is a snippet from my latest project. Take a look at the demonstrationFIDDLE. In this project, I have created a list with buttons: <a href="#f1" class="bt">1 <div class="show">Computers Networking</div> </a> When you ...

javascriptjqueryhtmlcss

I'm puzzled by the odd horizontal spacing issue between buttons that appears when adding a List Item element to an Unordered List using JavaScript. What could be the cause of

The Issue at Hand One problem I am encountering is the default spacing between my edit and delete buttons in the HTML document. When I use JavaScript to append a new list item that mirrors the structure and class names of the existing buttons, the newly a ...

javascripthtmlcss

Unable to retrieve the state value within a function nested inside a component

I have encountered an issue while trying to access the state variable val within my function addToFeed(). Whenever I attempt to print out the value of val using console.log("Value of val: " + val) in the first line of code inside addToFeed(), it always dis ...

javascriptreactjsreact-hooksnext.jsreact-state

Unusual phenomenon in ASP.NET: Adding Debug=true in the web.config file results in CSS modifications

As the question suggests: After including debug=true in my web.config file (without making any other alterations to the code), my page is displayed without a background color. Can anyone shed light on why this might be happening? ...

cssasp.netdebuggingweb-config

Implement a vertical scrolling animation in datatables

I am trying to utilize datatables to display all data. My goal is to have the data automatically scroll row by row every 3 seconds. This is my code, and you can also check it out on jsfiddle The intention is to showcase this data on a large screen. < ...

javascriptjqueryhtmlcssdatatables

After the page loads, the Facebook Like button causes my website content to shift downwards by 1 pixel

Why does the like button push down my website content by 1 pixel after loading? Any ideas on what might be causing this issue? Check out the website: See the problem in action here: ...

htmlcssfacebook

Difficulty displaying a progress bar over an overlay

Issue with Progress Bar Visibility in AJAX Call: I have a requirement to display a progress bar in an overlay after the save button is clicked. However, the progress bar is only visible after we receive the response from the AJAX call and display an aler ...

javascriptajaxprogress-baroverlay

How to keep the bottom of a CSS {position:sticky; top:0} element within the viewport without using JavaScript

I am working on creating a dashboard frame using Bootstrap 5, and I aim to achieve the functionality shown in these two images: Here is my current setup: <html> <body> <div class="pretoolbar">pretoolbar (non-essential inf ...

cssflexboxcss-positionstickybootstrap-5

I only need one array from a map that returns two promises with arrays

Currently, I am working on optimizing the process of adding food and drink to an order simultaneously. To achieve this, I have created a promise that resolves when both actions are completed. These promises are then nested within another promise, which res ...

javascriptarrayspromise

complete collection of sass and scss website templates

Are there any comprehensive sass/scss templates or mixins similar to what you get with compass, but designed for an entire website? For example, can you define 2 columns, width, color, etc. and have it generate a full site/template? Thanks, Rick ...

rubycsssass

When rails code is placed within haml tags, it results in generating empty spaces within the HTML tags of browsers

Every time a rails variable is nil (or when using rails code (as seen in the third code example)), my html displays a string of empty characters. new.html.haml %h1.editable.editable_title_field{:contenteditable => 'true', :placeholder => ...

ruby-on-railshtmlcsshaml

The variable req.body.Dates has not been declared

I am currently working on a project that involves dynamically populating two drop down menus using SQL Server. Depending on the selected items, I need to load a specific ejs template using AJAX. My goal is to load data based on the selected criteria. For e ...

javascriptjquerynode.jssql-serverexpress

Tips on integrating JavaScript with embedded Ruby code

I am attempting to generate a flash message that displays after a user clicks a link in my js.erb file. $('a').click(function(){ <% flash.now[:alert]= "Successfully added "%> this.innerHTML <% "to cart" %> }) M ...

javascriptjqueryruby-on-railsrubyerb

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?

My goal is to have the blue square fade in on the first button click, then fade out while the red square fades in on the second click. Unfortunately, it seems that my current code is not achieving this effect. I'm open to any suggestions or help on h ...

javascripthtmlcssfunctionmouseclick-event

Elements being impacted by the CSS Transition are being pushed

I am facing a CSS issue that I just can't seem to resolve. If you visit and check out the top search bar. On hovering over it, you'll notice it resizes to fit the content width. This is the CSS code responsible for this: .header .search-wrap ...

htmlcsscss-transitions

Tips for displaying a dropdown on top of a modal with the help of Tailwind CSS

I am currently utilizing Tailwind CSS and I am struggling to display the white dropdown over my modal. Despite attempting to use the z-index, I have been unsuccessful in getting it to work. Do you have any suggestions or insights on how to resolve this is ...

htmlcssvue.jstailwind-cssheadless-ui