Jump to content

overflow: hidden pushes next div down


Darghon

Recommended Posts

Hi all,

 

I've been creating a somewhat responsive layout for an existing application.

 

Some of the pages contains sets of data that have been grouped.

 

I've added styles to show them as blocks next to each other as long as enough space is available. so full screen is shows 3 blocks next to eachother, on a smaller 2 blocks, or 1 block depending on the available width.

 

If the content of one block exceeds the length allocated, I have an additional class "clipped" that turns the overflow hidden, and adds ellipses to the text.

 

But as the title suggests, doing this pushes the next div down which looks ugly.

Removing the overflow:hidden style fixes the issue, but makes the text run out of bounds.

 

Listed below are the html uses, and the css related.

Can anyone help me resolve this issue?

 

(The additional style code in the full line value is to ensure that multi line texts are still positioned next to the label and not under it)

 

Css:

#wrapper label { float:left; font-weight:bold; text-align: right; width:200px; margin-right:10px; }
 
#main #main_wrapper .group_content { display: block; }

#main #main_wrapper .group_content .attribute_block { display: inline-block; min-width: 400px; margin-right: 20px; }

#main #main_wrapper .group_content .attribute_block.full_line { display: block; min-width: 100%; }



#main #main_wrapper .group_content .attribute_block input,

#main #main_wrapper .group_content .attribute_block textarea { max-width: 300px; }

#main #main_wrapper .group_content .attribute_block select { max-width: 322px; }
 
.clipped { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

Html:

<div class="group_content clearfix">

            <div class="attribute_block full_line clearfix">

                <div class="label"><label>Beschrijving</label></div>

                <div style="float: right; width: calc(100% - 210px);" class="value">Addendun voor een raamovereenkomst.</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Auteur</label></div>

                <div class="value clipped">Quickstage Support</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Aangemaakt op</label></div>

                <div class="value clipped">19/12/2012 10:14:54</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Laatste aanpassing op</label></div>

                <div class="value clipped">19/12/2012 10:14:54</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Gegevensbron</label></div>

                <div class="value clipped">Schooljaar - Klas - Leerling - Stageperiode</div>

            </div>

            <div class="attribute_block">

                <div class="label"><label>Bestandsnaam</label></div>

                <div class="value clipped">Aanvullendbijraamovereenkomst.docx</div>

            </div>

        </div>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.