This is a migrated thread and some comments may be shown as answers.

Label Alignment

1 Answer 12 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 15 Oct 2020, 04:37 PM

I have an odd behavior with the splitter.  I'd like to know how to get this to work.  For some reason the Label is aligned to the left off the page.  How do I get around this behavior?

 

Splitter Definition:

@(Html.Kendo().Splitter()
    .Name("splitter")
    .HtmlAttributes(new { style = "height: 150px;" })
    .Panes(panes =>
    {
        panes.Add()
            .HtmlAttributes(new { id = "top_pane" })
            .Collapsible(true)
            .Content(@<p>@Html.Partial("_SplitterWorkPanel1")</p>);
 
        panes.Add()
            .HtmlAttributes(new { id = "bottom_pane" })
            .Collapsible(true)
            .Content(@<p>@Html.Partial("_SplitterWorkPanel2")</p>);
    }))

 

Partial Views (both are the same):

@{ Layout = null; }
 
<div class="row">
    <label class="col-form-label">Date Range</label>
 
</div>
 
<div class="row" style="margin-top: 5px;">
    <label class="col-form-label">Status</label>
 
</div>

 

1 Answer, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 15 Oct 2020, 05:17 PM

Never mind. 

I didn't realize the class="row" by default has a margin:

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

 

I put this in my site.css:

.row-clean {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

 

Tags
Splitter
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or