Unable to get <class="row" to work as expected[Answered] RSS

• • Reply
  talldaniel

  Member

  129 Points

  314 Posts

  Unable to get <class="row" to work as expected

  Mar 15, 2020 10:43 PM|talldaniel|LINK

  I have spent the last six hours trying to get  some text variables to display in two separate rows in Blazor. 

  What seems to be happening is that the browser doesn't know about carriage returns, so even though I am doing a new row, it continues where it the cursor was, except down the page the amount of the margin.

  Though sometimes it seemed to know about carriage returns, but formatted it as if I had used col-3 , three separate times in the row.  (I did not, I have only used row)

  Of course, in six hours I have tried a LOT of possible permutations and finally I started making components.

  Additionally when I view my page with F12, and elements it does show it with two divs and each has a class = "row" but it doesn't display as I would expect where each has its own line.

  These few lines have their own component, and that is called inside of a loop, which seems to be where the issue is as i have no trouble formatting two rows with not inside a loop.

  <div class="row" style="font-weight:700">
  
      @E.EmployerName
  </div>
  <br/>
  <div class="row" style="margin-top:10px;">
      @E.Title  @E.StartMonth/@E.StartYear - @E.EndMonth/@E.EndYear
  </div>

  @code {

  [Parameter]
  public Employers E { get; set; }

  }

  What ever the problem is, I am sure it is something to do with issues with looping. 
  
  

  Also, it completely ignores <br/>

• • Reply
  talldaniel

  Member

  129 Points

  314 Posts

  Re: Unable to get <class="row" to work as expected

  Mar 15, 2020 11:23 PM|talldaniel|LINK

  Found it.  

  Solution?  Do not wrap a foreach loop in a div with class="row".

  It will break all of the bootstrap in the components it calls.

  Also the <br/> had stopped working and this fixed that too.