3

I am in the process of developing a BootStrap wrapper for an ASP.NET website that works with almost everything I have used in it -- with the only exception being that content in the main panel does not center itself properly when shrinking the browser window's width, despite the header and footer being completely responsive.

I have a fiddle for this problem: https://dotnetfiddle.net/6dmcaX.

PLEASE NOTE that this wrapper is applied to the master page, and not directly onto the pages that I'm testing with.

For the header, I use a div with the following class attributes: d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top. Inside that is an UpdatePanel and ContentTemplate, with holds a bunch of markup for the BootStrap navbar.

Meanwhile, here is the markup for the main content panel:

<div class="container d-flex justify-content-center flex-md-rows align-items-center">
// the container acts the same with or without the text to the right of "d-flex"
    <div id="content" class="row" style="margin-left: auto; margin-right: auto;">
        <div id="divContMain" runat="server" style="width: auto;">
            <asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <center>
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                    </center>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    …
    </div>
</div>

The container divContMain needs to run on the server because just below the main content is a sidebar which may or may not be needed, depending on the page being called. By default, the class for divContMain is col-12. One thing I tried doing to fix this problem was I changed the main container to a container-fluid and changed divContMain's width to be inherited instead of "auto" -- and while this did a better job keeping contents in the center, it eventually stops working once the window gets small enough.

I'm very close to figuring this one out, but I wanted to ask and see if anyone else knew. Any help would be appreciated!

2
  • Do you want to center Purchasing Requisitions text?
    – StepUp
    Apr 21, 2021 at 15:49
  • @StepUp I want it to be centered within its container, yes.
    – Freerey
    Apr 21, 2021 at 15:52

2 Answers 2

2

It is possible to use combination of the Bootstrap classes to justify content when display: flex is used:

d-flex justify-content-center

So you can add new css class for h1:

#MainContent_ctl00 > h1 {
  text-align: center;
}

and add d-flex justify-content-center styles for div which contains your table:

<div class="container d-flex justify-content-center" style="overflow-x: visible;">
    <table class="datatable datatable-striped" 
       id="MainContent_dgReqs" style="border-collapse:collapse;"
       border="1" rules="all" cellspacing="0" cellpadding="5">
        <!-- The other code is omitted for the brevity -->
    </table>
</div>

In addition, text can be aligned through text-align: center inside of <h1>.

An example:

.tableint {
  font-size: 15px;
  font-family: Estrangelo Edessa, Verdana;
  border: Solid 1px #666666;
  border-collapse: collapse;
  color: Black;
}

.thint {
  background-color: #EE8322;
  color: Black;
  font-weight: bold;
  font-size: 14px;
  border: solid 1px #666666;
  border-collapse: separate;
  font-variant: small-caps;
  margin-bottom: 5px;
}

.textboxint {
  background-repeat: repeat-x;
  border: 1px solid #d1c7ac;
  font-size: 14px;
  border-style: inset;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-family: Estrangelo Edessa, Verdana;
  color: Black;
  width: 175px;
}

.dropdownint {
  background-repeat: repeat-x;
  border: 1px solid #d1c7ac;
  font-size: 12px;
  border-style: inset;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-family: Estrangelo Edessa, Verdana;
  color: Black;
  width: 175px;
}

.buttonint {
  margin: 5px;
  font-family: Estrangelo Edessa, Verdana;
  font-size: 14px;
  background-color: #EE8322;
  color: Black;
  text-align: center;
  border-top-style: groove;
  border-left-style: groove;
  border-right-color: Black;
  border-bottom-color: Black;
  height: 22px;
}

.buttonint:hover {
  font-family: Estrangelo Edessa, Verdana;
  font-size: 14px;
  background-color: #FFFFCC;
  color: #006699;
  margin: 5px;
}

#MainContent_ctl00 > h1 {
  text-align: center;
}
<div class="container-fluid my-hs d-flex justify-content-center flex-md-rows align-items-center">
    <div class="row justify-content-center" id="content"
      style="margin-left: auto; margin-right: auto; padding-top: 1rem;">
      <!-- <div id="divContMain" style="width: inherit;">may just remove -->
      <div id="contentUPanel">
        <div id="MainContent_ctl00">
          <br>
          <h1>Purchasing Requisitions</h1>
          <br>
          <div>
            <table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
              <tbody>
                <tr>
                  <td align="center" class="thint" colspan="2">Filter</td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Request Start:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text">
                  </td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Request End:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text">
                  </td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Part Number:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Account:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Vendor No:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="left" style="width: 50%">Vendor Name:</td>
                  <td align="left" style="width: 50%">
                    <input class="textboxint" style="width:175px;" type="text"></td>
                </tr>
                <tr>
                  <td align="center" colspan="2">
                    <input class="buttonint" type="submit" value="Search">
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br>
          <div class="container d-flex justify-content-center" style="overflow-x: visible;">
            <table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;"
              border="1" rules="all" cellspacing="0" cellpadding="5">
              <tbody>
                <tr align="center" class="thint" style="color:Black;background-color:#EE8322;font-weight:bold;">
                  <td>Row1</td>
                  <td>Row2</td>
                  <td>Row3</td>
                </tr>
                <tr align="center" class="gridview">
                  <td>Data1</td>
                  <td>Data2</td>
                  <td>Data3</td>
                </tr>
                <tr align="center" class="gridview" style="background-color:#FFE1CD;">
                  <td>Data1</td>
                  <td>Data2</td>
                  <td>Data3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src=" index.js"></script>
  <link rel="stylesheet" type="text/css"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
  </script>

UPDATE:

I saw you edited your fiddle. So the items are aligned, however we need to align the above div container. So to do this, it is necessary to add the following styles:

<div class="row" id="content mx-auto" style="display:flex; justify-content: center;">

   <!-- The other code is omitted for the brevity -->
</div>
2
  • I can't tell what's different here other than the #MainContent tag in the CSS area, and even then that doesn't do anything. Please don't just drop a bunch of text here all at once.
    – Freerey
    Apr 21, 2021 at 17:36
  • thanks a lot for the help!! I was able to find out what exactly to do after the content was justified :)
    – Freerey
    Apr 22, 2021 at 13:45
0

With some help from StepUp, I was able to find out what exactly was going wrong. The main container needs its position set to absolute and the content group just below the container needs its content justified to the center, like this:

<div class="container-fluid mt-5" style="position: absolute;">
    <div id="content" class="row" style="display: flex; justify-content: center;">
        …
    </div>
</div>

Now everything scales and is properly centered!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.