CODEWITHSUNDEEP
asp.nethtmlrepeatercss
Matt
Matt

Reputation: 273

resize div width down based on the amount of data contained within repeater and up to a max-width

I have a repeater wrapped in a div which displays results as horizontal text. The div is set to a maximum width of 450px which causes the results to wrap onto the next line which is perfect, but the width remains 450px when there are less than 450px width's worth of results. I would like the div to resize down to the width of the results.

This is the data wrapping ok in the div:

Results wrapping ok

This is what happens when there are a small number of results:

Results not resizing down

This is what I would like to happen:

Results resized down

Here is my css for the div:

        div.SelectedStudents {
            background-color: lightyellow;
            font-family: verdana, tahoma, Helvetica, sans-serif;
            font-size: 11px;
            border:solid 1px black;
            max-width:450px;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            padding: 5px;
            line-height:1.5em;
        {

Here is my div and repeater:

           <div class="SelectedStudents"> 
               <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsProgressCohorts" onitemdatabound="Repeater1_ItemDataBound">
                   <ItemTemplate>
                       <asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' />
                    </ItemTemplate>
                    <AlternatingItemTemplate>
                        <asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' Font-Bold="True" />
                    </AlternatingItemTemplate>               
                    <FooterTemplate>
                        <asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" />
                    </FooterTemplate>
                </asp:Repeater>
           </div>

EDIT:

After applying display:table; to css I lose the spaces between each result:

display:table;

Got around this by adding a space + ' ' to my select statement inside the SQL stored procedure I am calling to retrieve the results.

Upvotes: 0

Views: 2762

Answers (2)

cimmanon
cimmanon

Reputation: 68319

All you need to add is display: table. It acts similar to inline-block in that it shrinks to fit the content, but without having the element appear inline.

http://cssdeck.com/labs/12tg3bge

div.SelectedStudents {
    background-color: lightyellow;
    font-family: verdana, tahoma, Helvetica, sans-serif;
    font-size: 11px;
    border:solid 1px black;
    max-width:450px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    line-height:1.5em;
    display: table;
}

Upvotes: 2

Maurizio In denmark
Maurizio In denmark

Reputation: 4284

Try setting the width to auto in the css:

div.SelectedStudents {
        background-color: lightyellow;
        font-family: verdana, tahoma, Helvetica, sans-serif;
        font-size: 11px;
        border:solid 1px black;
        max-width:450px;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        line-height:1.5em;
        width: auto;
    }

if it does not work set the width of all the other containers inside the div to auto as well.

Upvotes: 0

Related Questions