CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 131

Display a div only if there is enough space, and hide it if there isn't

I have a table with a date column. Each date looks like

Wednesday, 08.06.2011

When the width of the browser window is too narrow, I want to only display the date without the day of the week to conserve horizontal space. Like this

08.06.2011

An ideal solution would allow a markup like

<div class="weekday">Wednesday, </div><div class="date">08.06.2011</div>

and be entirely css-based without involving JavaScript. But if that is not possible I could live with a JavaScript-based solution.

Upvotes: 13

Views: 17788

Answers (6)

erwan oger
erwan oger

Reputation: 111

flex is magic :

https://codepen.io/rwaness/pen/abZKXNj (4th case)

.row {
    display: flex;
    flex-wrap: no-wrap;
    height: 30px;
    max-width: 200px;
    margin-top: 10px;
    padding: 5px;
    background: #bcbcbc;
}
.col {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px;
    border: 1px solid #9C9C9C;
    border-radius: 3px;
    overflow: hidden;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
}
.col + .col {
    margin-left: 5px;
}
.col.full {
    flex: 1;
}
.col.reverse {
    flex-wrap: wrap-reverse;
    align-content: flex-end;
}
<div class="row">
    <div class="col">
        <span>📞</span>
    </div>
    <div class="col full reverse">
        <span>Wednesday</span>
        <span>08.06.2011</span>
    </div>
</div>

Upvotes: 0

Tomasz Durka
Tomasz Durka

Reputation: 586

You need some scripting here. CSS can't do action based on some element's property like width. Just add simple javascript command in head of you script, e.g. in jQuery:

$(document).ready(function () {
    if ($(window).width() < 1024) 
        $('body').addClass('too-narrow');
});

Then do rest in CSS.

EDIT:

Actually there is CSS solution to this if you really want it.

.row { height: 30px; background: red; color: white; overflow: hidden; }
.row120 { width: 120px; }
.row200 { width: 200px; }
.row .other { height: 30px; float: left; }
.row .date,
.row .weekday { height: 30px; float: right; }
<div class="row row120">
    <div class="other">Tilte</div>
    <div class="date">18.04.2010</div>
    <div class="weekday">Wednesday</div>
</div>
<div class="row row200">
    <div class="other">Tilte</div>
    <div class="date">18.04.2010</div>
    <div class="weekday">Wednesday</div>
</div>

You need to have set height for both row div and other/date/weekday divs. Set those two to be floated right and all other (earlier) fields to float left. Worked for me on Chrome (showing Title 18.04.2010), not sure how others.

Upvotes: 8

user663031
user663031

Reputation:

Use a media query for narrow windows, then within it define the weekday class as display:none.

Upvotes: 1

Wex
Wex

Reputation: 15695

This is a pretty ugly solution, but if you want to make entire words disappear, there's no better CSS technique than to use overflow: hidden.

I modified your markup a bit... maybe you can come up with something better, but hopefully this points you in the right direction for a pure CSS solution:

<div class="date">
    <span>08.06.2011</span>
    <span class="weekday">Wednesday</span>
</div>

CSS:

div {
    background: #ccc;
    height: 18px;
    margin: 0 0 5px;
    overflow: hidden; }
span { float: right; }
span.weekday { 
    float: left;
    padding: 0 4px; }

See: http://jsfiddle.net/EQTBa/

Upvotes: 0

Zoidberg
Zoidberg

Reputation: 10323

This solution will require javascript. Below is a modification to your HTML to include a container around your display. THe container could have more in it, but for simplicity I am only going to show the date in it.

<div id="container">
    <div id="daydisplay" class="weekday">
        Wednesday
    </div>
    <div class="date">
        08.06.2011
    </div>
</div>

Now you can use any javascript library to get the width of the viewport. YUI and JQuery both have these functions, so since that is easy I am going to assume we have a variable called widthOfScreen which holds the width of the viewport. I am also going to assume we have a variable called left which holds the number of pixels over from the left this display is located.

var container = document.getElementById('container'),
containerWidth = container.clientWidth || container.scrollWidth;

if (containerWidth + x > widthOfScreen) {
   document.getElementById('daydisplay').style.display = 'none';
}

That should do the trick.

Upvotes: 1

Gregory A Beamer
Gregory A Beamer

Reputation: 17010

You can "query" what the user has his resolution set to. As an example, look at this: http://www.javascripter.net/faq/browserw.htm

I am not sure what "too small" means in your application, as it is dependent on a lot of things (size of font, etc), but if you can determine when the browser window size is too small, you can then set up the JavaScript to hide the div #weekday.

Upvotes: 0

Related Questions