locked
help with bootstrap RRS feed

  • Question

  • User569149469 posted
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                     Select  Analysis
                    </h4>
                </div>
                <div class="modal-body">
    
                    <form>
                        <div class="row">
                       
                            <div class="form-group">
                                <label  class="control-label">Search a Analysis</label>
                                @Html.DropDownList("FromJson", new MultiSelectList(Enumerable.Empty<SelectListItem>()), new { @class = "form-control" })
    
    
                            </div>
                         
                           
                        </div>
                        <div class="row">
                            <div class="input-group">
    
    
                                @Html.TextBox("txtSearch", "", new { @class = "form-control" })
    
                                <button type="button" onclick="" class="btn btn-danger"  ><i class="fa fa-search"></i></button>
    
    
                            </div>
                        </div>
                        <div class="row">
                            <table id="jqgrid"></table>
                            <div id="pager"></div>
    
                        </div>
                        <div class="row">
                            
    
                        </div>
                    </form>
    
    
                </div>
    
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    alignment is not proper for the second row I want the full text area with image side by side same as the width of the first row but the alignment is not proper.Can you pls tell me the diff of form group and input group

    Wednesday, July 18, 2018 4:57 AM

All replies

  • User-369506445 posted

    hi

    Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs. For example, you can add the $ symbol, @ for a Twitter username, or anything else as required.

    Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.

    Therefore, use both form-group and input-group as required. Do wrap your label and input in a form-group tag. If any of your input field required to prepended/appended with text/button, wrap the control with input-group.

    for example for your second row

     <div class="row">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <button type="button" onclick="" class="btn btn-danger"><i class="fa fa-search"></i></button>
                                        </span>
                                        @Html.TextBox("txtSearch", "", new { @class = "form-control" })
                                    </div><!-- /input-group -->
    
                            </div>

    Wednesday, July 18, 2018 5:18 AM
  • User-330142929 posted

    Hi Phmaspnet.

    As far as I know, form-group can be used for form layout, add this style to the div in the form for layout, and layout with the class of the form,

    Input box group is an extension of the form, which can be easily combined in the form div, such as span and input.

    Here is the relevant link, wish it is useful to you.

    https://stackoverflow.com/questions/36835615/difference-between-input-group-and-form-group

    Here are official documents.

    https://getbootstrap.com/docs/4.1/components/forms/#form-groups

    https://getbootstrap.com/docs/4.1/components/input-group/

    Feel free to let me know if you have any questions.

    Best Regards

    Abraham

    Thursday, July 19, 2018 7:17 AM