Setting the width of a wizard modal to auto

I am facing an issue with my modal wizard. The width of the first modal is perfect, but when I navigate to the second and third modals by pressing next, they automatically take on a fixed width size that I need to modify. I have tried declaring the width using modal dialog, but it reflects back to step 1 modal. What I actually need is to set a separate width for each modal.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
   <div class="modal-content">
      <div class="modal-body">
         <div class="row hide" data-step="1" data-title="" id="one">
            <div class="panel panel-default">
               <div class="panel-body">
                  <button type="button" class="close" data-dismiss="modal">
                  <font color="black"> <a href="#" style="color: darkred">
                  <span style="color: darkred;">×</span>
                  </a></font>
                  </button>
                  <label class=" col-sm-4">Edit &nbsp;&nbsp; <span
                     type="text"><a href="#" id="item"
                     class="text js-btn-step" data-orientation="next">Save</a></span></label> <br />
                  <div class="container">
                     <div class="row">
                        <div class="col-md-6">
                           <div class="form-body">
                              <br />
                              <table class="table table-responsive">
                                 <tbody>
                                    <tr>
                                       <td class="outside scrollable-menu"
                                          style="border-style: none; border-bottom-style: none;">
                                          <select id="inputEducation" class="form-control"
                                             required
                                             oninvalid="this.setCustomValidity('State Required')"
                                             oninput="this.setCustomValidity('')">
                                             <option hidden value="">10th</option>
                                             <option value="a">10th</option>
                                             <option value="b">12th</option>
                                             <option value="a">Degree</option>
                                             <option value="b">Masters</option>
                                             <option value="b">Cetificate</option>
                                          </select>
                                       </td>
                                       <td class="outside scrollable-menu"
                                          style="border-style: none; border-bottom-style: none;">
                                          <select id="inputStream" class="form-control" required
                                             oninvalid="this.setCustomValidity('Stream Required')"
                                             oninput="this.setCustomValidity('')">
                                             <option hidden value="">Degree</option>
                                             <option value="ar">BCA</option>
                                             <option value="cm">BSc</option>
                                             <option value="sc">BBA</option>
                                          </select>
                                       </td>
                                    </tr>
                                    <tr>
                                       <td class="outside"
                                          style="border-style: none; border-bottom-style: none;">
                                          Stream
                                          <select
                                             id="inputStream" class="form-control" required
                                             oninvalid="this.setCustomValidity('Stream Required')"
                                             oninput="this.setCustomValidity('')">
                                             <option hidden value="">Stream</option>
                                             <option value="ar">Arts</option>
                                             <option value="cm">Commerce</option>
                                             <option value="sc">Science</option>
                                          </select>
                                       </td>
                                       <td class="outside"
                                          style="border-style: none; border-bottom-style: none;">
                                          Institution
                                          <select id="inputStream" class="form-control" required
                                             oninvalid="this.setCustomValidity('Stream Required')"
                                             oninput="this.setCustomValidity('')">
                                             <option hidden value="">Institution</option>
                                             <option value="ar">VTU</option>
                                             <option value="cm">Anna</option>
                                             <option value="sc">Bangalore</option>
                                          </select>
                                       </td>
                                       <td class="outside"
                                          style="border-style: none; border-bottom-style: none;">Yr
                                          of Passing <input type="date" class="form-control"
                                             id="resizedTextbox" placeholder="Yr of Passing" />
                                       </td>
                                    </tr>
                                    <tr>
                                       <td class="outside"
                                          style="border-style: none; border-bottom-style: none;">
                                          State
                                          <select
                                             id="inputState" class="form-control" required
                                             oninvalid="this.setCustomValidity('State Required')"
                                             oninput="this.setCustomValidity('')">
                                             <option hidden value="">State</option>
                                             <option value="is">Karnataka</option>
                                          </select>
                                       </td>
                                       <td class="outside"
                                          style="border-style: none; border-bottom-style: none;">
                                          Country
                                          <select id="inputCountry" class="form-control" required
                                             oninvalid="this.setCustomValidity('Country Required')"
                                             oninput="this.setCustomValidity('')">
                                             <option hidden value="">Country</option>
                                             <option value="is">India</option>
                                             <option value="is">US</option>
                                          </select>
                                       </td>
                                       <td class="outside"
                                          style="border-style: none; border-bottom-style: none;"><br>
                                          <input type="file" size="80">
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="row hide" data-step="2" id="two">
            <center>
               <div class="alert alert-info">
                  <center>Do you want add another record</center>
                  <br>
                  <button type="button" class="btn btn-warning js-btn-step"
                     data-orientation="previous"
                     style="background-color: lightblue;">Yes</button>
                  <button type="button" class="btn btn-success js-btn-step"
                     data-orientation="next" style="background-color: lightblue;">No</button>
            </center>
            </div>
            </center>
         </div>
         <div class="row hide" data-step="3" id="three">
            <center>
               <div class="alert alert-info">
                  <center>NN records saved</center>
                  <br> <span class="btn btn-success js-btn-step"
                     data-orientation="Complete"
                     style="background-color: lightblue;">Ok</span> <br>
            </center>
            </div>
         </div>
      </div>
   </div>
</div>
htmlcssbootstrap-4

Answer №1

If you plan to utilize various modals for each step, consider adjusting their max-width as shown below.

#modalOne .modal-dialog {
  max-width: 300px;
}

#modalTwo .modal-dialog {
  max-width: 500px;
}

Repeat this process for additional steps.

Additionally, make sure to include a data-dismiss="modal" attribute for every next button. This will close the current modal and reveal the subsequent one.

Check out the working example on JSFiddle

Answer №2

Experiment with defining the width using the attribute data-step

.modal-content[data-step="2"]{
width://customize to your preference
}

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

The HTML code displays the changes in output after resizing the screen

Currently, I am utilizing canvas(graph) within my Angular JS UI5 application. My main goal is to increase the width of the graph. However, whenever I attempt to adjust the size of the Graph, it remains unchanged. Interestingly, when I shrink the screen, th ...

htmlangularjs

What is the best way to insert a scroll into a section of a circular shape seamlessly?

Currently, my layout looks like this: https://ibb.co/iqaOXS However, I would like it to look more like this: https://ibb.co/eDkCRn The issue I'm facing is that the buttons are extending beyond the circular border. How can I prevent this from happeni ...

htmlcsswebscrollscrollbar

Real-time data feeds straight from JSON

Currently, I have a JSON file that is generated dynamically and it contains match information along with a unique id. This JSON data is categorized into live, upcoming, and recent arrays. Being new to Javascript, I am unsure about the best approach to crea ...

javascriptjqueryhtmljson

Exploring through a table using JavaScript

I am struggling to search a table within my HTML for a specific term. The code I have works to an extent, but it does not account for alternatives such as searching for "what is that" when I type in "What is that". Additionally, I need the script to ignor ...

javascripthtmlsearch

What is the best way to execute two JavaScript functions within an inline onclick event?

I am currently working on the following code snippet: <script> function delay (URL) { setTimeout( function() { window.location = URL }, 2000); }</script> And then I have the following within the <body> element: <img src="small_rabbi ...

javascripthtml

What is the recommended way to retrieve a "NA" value when the radio button is not chosen or unavailable?

I want to assign the value "NA" when no radio button option is selected. Currently, I am using the following code snippet: $("input[name='question']:checked").siblings('label').text(). However, this code returns a blank value if any rad ...

htmljquery

Remove HTML element and launch in a separate browser tab while preserving styles

I am currently working on developing a single-page application with Polymer3 (Javascript ES6 with imports). One of the key functionalities of my application involves moving widgets to new browser windows, allowing users to spread them across multiple scree ...

javascripthtmlwebecmascript-6polymer

Triangle Top Megamenu Design

Currently, I am implementing a navbar in bootstrap v4.4.1 that includes a mega menu dropdown feature. In my design, I want to include a triangle at the top of the dropdown menu. While I have managed to add the triangle successfully, I am facing difficulti ...

cssbootstrap-4drop-down-menumegamenu

Auto-fit HTML Webpage Resizer Simplified

Just finished my very first jQuery project, a simple full-width slider. I've been focusing on HTML & CSS and currently working with C#. The problem is that I don't want the page to be scrollable; I want it to autofit to the webpage. Imagine ope ...

javascriptjqueryhtmlcss

Customizing the attribute of an HTML tag using EJS or jQuery

Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...

javascriptjqueryhtmlexpressejs

Modifying an image with jQuery

Why won't this image change? Below is the relevant HTML, CSS, and jQuery code. HTML <nav id="desktop-nav"> <div class="logo"> <a href="#"></a> </div> <div> ... </div> ... CSS nav#desktop-nav . ...

javascriptjqueryhtmlcss

Displaying a Bootstrap button and an input box next to each other

Looking for advice on aligning or arranging a button and input box side by side in Bootstrap without grouping. I've searched online for examples, but they all involve grouping of elements. jsfiddle: https://jsfiddle.net/erama035/p9dagmL3/3/ <div ...

htmltwitter-bootstrapcss

The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from bein ...

htmlcssbootstrap-4

What is the best way to bring my image to life and move it to

Just starting out with HTML and CSS. Can anyone help me learn how to animate my image so that it moves from its current position to another location? For example, transitioning from "top: 280px; left: 600px;" to "top: 180px; left: 500px;" I'm looking ...

htmlcss

Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...

htmlcssbootstrap-5

Incorporating a YouTube channel into mobile websites

While it's relatively easy to embed single YouTube videos in mobile pages with the help of Google, I'm still struggling with embedding a whole channel. The issue seems to revolve around the screen width, and my attempts at using JavaScript have n ...

javascripthtmlmobile

developing a sleek visual transition using CSS animation

Have you seen the awesome animation on Discord's website? Check it out here! The way those coins move up and down so smoothly is really impressive. How can I recreate that effect for my own images? I decided to start with this code snippet img { ...

cssanimation

Guide to positioning an image at the center across 2 columns using Bootstrap

Looking to create a split screen Bootstrap 4 layout with an image in the center overlapping the two columns. Have successfully set up two equal columns but struggling to position the image to overlap. Have experimented with position:absolute and float:lef ...

htmltwitter-bootstrapcssbootstrap-4

An Iframe lacks the ability to showcase HTML content, unlike a browser which is capable of doing

I'm struggling to get my Iframe to show the html string properly. Here's the content of the string: var='<BODY style="MARGIN: 0px" bgColor=#ffffff marginwidth="0" marginheight="0"> <SCRIPT language=JavaScript> var Caller_User_Ty ...

javascriptjqueryhtmliframe

Tips for properly filling empty spaces in a flexbox layout using HTML

Is there a way to fill in the gap using CSS so that boxes automatically take up the empty spaces, even if they are of different sizes? How can I make sure the boxes adjust automatically as the screen size changes? .c1 { display: flex; flex-wrap: w ...

htmlcss