why is a simple DIV positioning kicking my butt??[Answered] RSS

• • Reply
  celticpiping

  Member

  1 Points

  8 Posts

  why is a simple DIV positioning kicking my butt??

  Aug 28, 2020 04:31 PM|celticpiping|LINK

  The goal:   simply place two controls in a horizontal line, within a DIV.

  I've tried ...everything: clearly I'm not getting how it works..

  I'm using asp.net in VS.NET 2019, & a css page

  Ideally, I want two gauges side by side in a DIV.

  Currently, here's the code:

  .GaugeuserCount {
  
  }
  .GaugeP21Emails {
      float: right;
      position: absolute;
      top: 0px;
      height: 100px;
      width: 100px;
  }
  .gaugeDiv {
      position:relative;
      width:300px;
      height:150px;
      border:3px solid green;
  }

              <div id="gaugeDiv" runat="server" class="gaugeDiv">
                  <telerik:RadRadialGauge ID="GaugeuserCount" runat="server" Scale-MinorUnit="1" Width="150px" Height="150px" Scale-Min="0" BorderColor="#CC9900" Scale-MinorTicks-Color="SteelBlue" Scale-MajorTicks-Color="SteelBlue" Scale-MajorTicks-Size="18" CssClass="GaugeuserCount"></telerik:RadRadialGauge>
                  <telerik:RadRadialGauge ID="GaugeP21Emails" runat="server" Scale-MinorUnit="1"  Scale-Min="0" BorderColor="#CC9900" Scale-MinorTicks-Color="SteelBlue" Scale-MajorTicks-Color="SteelBlue" Scale-MajorTicks-Size="18" CssClass="GaugeP21Emails"></telerik:RadRadialGauge>
              </div>

  And here's what it looks like(Firefox on Windows 10):

  

  Rich in Portland, Maine
• • Reply
  mgebhard

  All-Star

  52991 Points

  23585 Posts

  Re: why is a simple DIV positioning kicking my butt??

  Aug 28, 2020 05:41 PM|mgebhard|LINK

  Placing divs side by side is very common in response websites.  The Bootstrap grid system is good example; https://getbootstrap.com/docs/4.0/layout/grid/.    Other examples is the CSS Flexbox; https://www.w3schools.com/css/css3_flexbox.asp

  With that being said, these options might not work with the Telerik styles.  Telerik is a paid for framework which makes it difficult for ASP.NET support members to test layouts.  Your best option is Telerik support.  The getting started docs show side-by-side gauges so seems possible; https://docs.nativescript.org/angular/ui/ng-components/ng-gauge/getting-started

• • Reply
  celticpiping

  Member

  1 Points

  8 Posts

  Re: why is a simple DIV positioning kicking my butt??

  Aug 28, 2020 05:47 PM|celticpiping|LINK

  wow, superb!

  The flexbox way just got me back on track.

  Thank you!!

  Rich in Portland, Maine