2

I want to show a few rows of data on a Details page, which each have a title and data on the same row. The data is showing fine, but since my titles are a little long, it is not fitting on the same line. It extends to the next line. For example, I want the title "Speaker's Interaction with Audience" to show in one line/row, instead of "with Audience" showing up on a new line under the first half of the title. I have been playing around for a while, but nothing seems to work.

Details page picture

This is how I have my style in the View 

<style>
    dl {
        width: 395px;
        font-size: 15px
    }

    dd, dt {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    dt {
        float: left;
        padding-right: 5px;
        font-weight: bolder;
    }

    dt {
        clear: left;
    }

    dt, dd {
        min-height: 1.5em;
    }
</style>

And the structure of my code is like this 

<div>
    <h4>IndividualSessionEvaluation</h4>
    <hr />
    <dl class="dl-horizontal">

        <dt>
            @Html.DisplayNameFor(model => model.OnScreenPresentation)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.OnScreenPresentation)
        </dd>   

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersSubjectKnowledge)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersSubjectKnowledge)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersInteractionwithAudience)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersInteractionwithAudience)
        </dd>
    </dl>
</div>
StraightUp
  • 205
  • 1
  • 5
  • 18

1 Answers1

1

Please use the Bootstrap column combination as follows

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

  <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
    <!-- Data -->
  </div>

  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <!-- Value -->
  </div>

</div>