none
How to align buttons across rows in a div using VS 2015 RRS feed

  • Question

  • I am attempting to display buttons inside a div panel across and down but can't seem to get it to work. They go down the page instead of across. What am I doing wrong?

    Screenshot:

    Here is the code I am using:

    <style>
    
      .col-sm-8 {
        width: 66.66666666666666%;
      }
    
    .panel-heading {
      padding: 10px 15px;
      border-bottom: 1px solid transparent;
      border-top-right-radius: 3px;
      border-top-left-radius: 3px;
    }
    
    .panel-title {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 16px;
    }
    
    .panel-body {
      padding: 15px;
        width: 221px;
        margin-bottom: 0px;
    }
    
    .row {
      margin-right: -15px;
      margin-left: -15px;
    }
    
    .rows .btn {
        margin-left:15px;
      }
    
    
    .bg-color-aliceblue {
            background-color: aliceblue;
    }
    
    .panel-green {
        background-color: #1cca48;
    }
    
    .height1 {
        height: 390px;
    }
    
      .btn-activity  {
      background: #082e75;
      border-radius: 10px;
      color: #ffffff;
      font-size: 13px;
      font-weight:bold;
      width: 210px;
      height: 50px;
       white-space:normal;
       display:table;
      
    }
    
    div.opacity1 {
        opacity: 0.8;
    }
    
    
    </style>
    
    <div class ="row" >
      <div class="col-sm-8" STYLE=";top:200px;left:485px;">
          <div class="opacity1">
            <div class="bg-color-aliceblue">
               <div class="panel-green">
                 <div class="panel-heading">
                 </div>
               </div>
               <div class="panel-body" STYLE="opacity:0.8;;">
                <div class="height1">
                    <div class="rows">
                    <asp:Button ID="btnact1" class="btn btn-activity" runat="server" OnClick="btnact1_Click" />
                    <asp:Button ID="btnact2" class="btn btn-activity" runat="server"  />
                    <asp:Button ID="btnact3" cssclass="btn btn-activity" runat="server"  />
                  </div>
                </div>
            </div>
            
        </div>
       </div>
      </div>
    </div> 

    • Moved by Weiwei Cai Wednesday, September 28, 2016 2:30 AM not VS IDE issue
    Monday, September 26, 2016 6:20 PM

All replies

  • Try a different style:


      .btn-activity
      {
          . . .
          display: inline-block;
      }

    By the way, there are a series of dedicated forums: http://forums.asp.net/.

    Monday, September 26, 2016 6:52 PM
  • Tried inline-block. Unfortunately there was no change.

    Is it possible to move the question to that asp.net forum easily?

    Monday, September 26, 2016 9:04 PM
  • Hi J-Bal,

    This forum is discuss Visual Studio WPF/SL Designer, Visual Studio Guidance Automation Toolkit, Developer Documentation and Help System, and Visual Studio Editor.

    Since your issue is more related to ASP.NET, I suggest you post your issue to ASP.NET forum to get a better help. Thanks for your understanding.

    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    • Edited by Weiwei Cai Wednesday, September 28, 2016 2:31 AM
    Tuesday, September 27, 2016 9:59 AM