0

I have a twitter bootstrap modal popup

<div class="modal fade" id="Div1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog custom-class">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="H2">Log</h4>
                    </div>
                    <div class="modal-body">
                  <asp:GridView id ="GridView1" runat="server" AutoGenerateColumns="false"
                  CssClass="table table-hover table-striped"
                  DataKeyNames="FieldID"
                  Font-Name="Verdana" GridLines="Both"
                  Font-Size="10pt" CellPadding="4">
                   <Columns>
                        Few Columns
                </Columns>
              </asp:GridView>  
           </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
 </div>
</div>

And my CSS is

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

But my CSS changes are not reflecting on the pop-up

The grid columns are coming out of the body, I mean the body is not increasing with the width of the grid.How can I make the width of the body more responsive with

grid

Learner
  • 71
  • 13
  • Can you provide a fiddle? – John Bupit Jul 27 '15 at 12:11
  • possible duplicate of [How can I change the default width of a Twitter Bootstrap modal box?](http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box) – Raja Jul 27 '15 at 12:21

1 Answers1

0

Add "modal-wide" to the main modal div, and adjust the width in the CSS. In this example, I'm using 90%. Since I'm using jQuery to set the max-height of the content area based on the browser dimensions, the modal will be only as tall as necessary, and will provide a scrollbar if needed.

<a data-toggle="modal" href="#normalModal" class="btn btn-default">Normal</a>

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>

<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a>

<div id="normalModal" class="modal fade"></div>
<div id="tallModal" class="modal modal-wide fade"></div>
<div id="shortModal" class="modal modal-wide fade"></div>

jsFiddle

I hope this will work for you.

Ankur Mahajan
  • 3,396
  • 3
  • 31
  • 42
  • Sorry, I am not able to write the answer in proper format.Hope you will understand just refer the codepen example, I am pretty sure that you will find the answer of your proble there. – Ankur Mahajan Jul 27 '15 at 12:19
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Hidden Hobbes Jul 27 '15 at 12:41
  • Thanks Hidden Hobbes, for you valuable comment. I will take care of this for my future answers. – Ankur Mahajan Jul 27 '15 at 12:46