Results 1 to 2 of 2

Thread: How can I reduce the width of this modal input form and make it more opaque?

  1. #1
    Junior Member
    Join Date
    Apr 2016
    Posts
    2

    How can I reduce the width of this modal input form and make it more opaque?

    I used Dino Esposito's article here to get a good start on a modal input form.

    I added this html:

    HTML Code:
    <a type="button"
           class="btn"
           href="#add-email"
           name="addlEmails" id="addlEmails"
           data-toggle="modal">Add Another Email</a>
    ...and then this:

    HTML Code:
    <div class="modal fade" id="add-email">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">&times;</a>
                <h3>Add New Email Address for current Unit/Report</h3>
            </div>
            <div class="modal-body">
                <p>Cuerpo del Formulario</p>
                <label>Add Email</label><input type="text" name="additionalEmail" id="additionalEmail" />
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
                <a href="#" class="btn btn-primary" id="btnSaveEmail" name="btnSaveEmail">Save Email Address</a>
            </div>
        </div>
    ...to have a "pseudo-button" to open the modal input form so as to allow the user to enter additional email addresses, if the three input texts for email addresses on the form are not enough in some scenarios.

    The problem is that the form is "see-through" and way too wide:

    modalInputForm2.jpg

    The screamshot shows the "Add Another Email" button/link at the southeast corner and the modal input form from just below the menu bar ("Add New Email Address for current Unit/Report" in the northwest corner, which is scarcely visible, being mostly obscured by the black background of the menu bar) to the "Save Email Address" button below and to the right of that.

    I thought adding a custom "halfwidth" class would reduce the width of the modal form:

    Code:
    .halfwidth {
        height: 240px;
        width: 160px; 
    }
    ...but it really didn't help at all.

    How can I shrink it (horizontally, width-wise, especially) to a more moderate size, and get rid of its "invisibleness"? I want it to appear more like a "traditional" (Windows form-like) input dialog.

  2. #2
    Junior Member
    Join Date
    Apr 2016
    Posts
    2
    Quote Originally Posted by clayshannon View Post
    I used Dino Esposito's article here to get a good start on a modal input form.

    I added this html:

    HTML Code:
    <a type="button"
           class="btn"
           href="#add-email"
           name="addlEmails" id="addlEmails"
           data-toggle="modal">Add Another Email</a>
    ...and then this:

    HTML Code:
    <div class="modal fade" id="add-email">
            <div class="modal-header">
                <a class="close" data-dismiss="modal"></a>
                <h3>Add New Email Address for current Unit/Report</h3>
            </div>
            <div class="modal-body">
                <p>Cuerpo del Formulario</p>
                <label>Add Email</label><input type="text" name="additionalEmail" id="additionalEmail" />
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
                <a href="#" class="btn btn-primary" id="btnSaveEmail" name="btnSaveEmail">Save Email Address</a>
            </div>
        </div>
    ...to have a "pseudo-button" to open the modal input form so as to allow the user to enter additional email addresses, if the three input texts for email addresses on the form are not enough in some scenarios.

    The problem is that the form is "see-through" and way too wide:

    modalInputForm2.jpg

    The screamshot shows the "Add Another Email" button/link at the southeast corner and the modal input form from just below the menu bar ("Add New Email Address for current Unit/Report" in the northwest corner, which is scarcely visible, being mostly obscured by the black background of the menu bar) to the "Save Email Address" button below and to the right of that.

    I thought adding a custom "halfwidth" class would reduce the width of the modal form:

    Code:
    .halfwidth {
        height: 240px;
        width: 160px; 
    }
    ...but it really didn't help at all.

    How can I shrink it (horizontally, width-wise, especially) to a more moderate size, and get rid of its "invisibleness"? I want it to appear more like a "traditional" (Windows form-like) input dialog.
    My image insertion didn't seem to work; don't know why...

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •