Overflow hidden for text in css

Question

I have an element with image and text,

Fiddle. Note: Resize preview enough to make grid big enough.

Here is my CSS:

 .gridster .gs-w .item{

     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

.gridster .gs-w .item .obj{
    background-color: #00A9EC;

 }

.gridster .gs-w .item .itemIcon {
     height: 100%;
     width: 100%;
     float:left;
     overflow: hidden;
     z-index: 10;
}  

.gridster .gs-w .item .itemIcon {
    background-image: url(http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Apps-Calendar-Metro-icon.png);
    background-repeat:no-repeat;
    background-size:contain;
    align-content: center;
} 

.gridster .gs-w .item .itemText{
display: block;
width: 100%;
position: relative;
margin-right: 0px;
right: 0px;
text-align: right;
z-index: 9;
}


.gridster .gs-w .item .itemText a{
vertical-align: center;
text-align:right; 
color:white;
    padding-right: 10%;
    font-size: 14px;
    font-weight: 600;
    text-decoration:none;
    font-family: 'Segoe UI';
}

I want to show text when element is expanded, and hide when element is collapsed, I think I can achieve it by CSS, but it's not yet clear what is wrong.

and here it is collapsed

advise some CSS code, in case if possible to make in CSS.

Answer 1

You can hook into resize.resize .

By checking data attribute data-sizex you get how many columns the cell spans. By this you can expand the init function to the following:

Sample fiddle.

public.init = function (elem) {
    container = elem;
    // Initialize gridster and get API reference.
    gridster = $(SELECTOR, elem).gridster({
        shift_larger_widgets_down: true,
        resize: {
            enabled: true,
            resize: function (e, ui, $widget) {
                var cap = $widget.find('.itemText');
                // Hide itemText if cell-span is 1
                if ($widget.attr('data-sizex') == 1) {
                    cap.hide();
                } else {
                    cap.show();
                }
            }
        }
    }).data('gridster');
    hookWidgetResizer();
}

Or cleaner, and likely preferable. Split it out to own function and say something like:

resize: capHide

Sample fiddle.

---

If you rather go for the solution proposed by your updated images, one way is to tweak the CSS on resize, using your resize_widget_dimensions function. Sure this can be done better, but as a starter you can have this:

Sample fiddle.

this.$widgets.each($.proxy(function (i, widget) {
    var $widget = $(widget);
    var data = serializedGrid[i];
    this.resize_widget($widget, data.size_x, data.size_y);
    // Find itemText
    var $it = $widget.find('.itemText');
    // Set CSS values.
    $it.css({width:this.min_widget_width, left:this.min_widget_width});
}, this));

Challenge is that the gridster is a very fluid cake where a lot of the dimensions and positioning is done by JavaScript rather then pure CSS. Anyhow, the above should give a direction on how to tweak it, and might even be good enough ;)

---

As a final treat you can resize the font according to cell size. I'm not sure how to best find the size you want as you divide the space between icon/image and text. But something like this:

Sample fiddle.

Where you have a hidden span to measure text:

<span id="font_sizer"></span>

With CSS:

#font_sizer {
    position: absolute;
    font-family:'Segoe UI';
    visibility: hidden;
}

And font measure by:

function szFont(w, t) {
    var s = 1, $fz = $('#font_sizer');
    $fz.text(t);
    $fz.css('fontSize', s + 'px');
    while ($fz.width() < w - 2)
        $fz.css('fontSize', ++s + 'px');
    return s;
}

You can set font size as:

var fontSize = szFont(this.min_widget_width - 10, 'Objects');

Where this.min_widget_width - 10 is the part where you set size available for text. Then you can say:

var $it = $widget.find('.itemText');
$it.css({fontSize: fontSize + 'px', width:this.min_widget_width, left:this.min_widget_width});

---

Other notes:

• You have a typo in:

   var container, grister, // <<-- Missing 'd' in gridster resizeTimer; 

• In extensions you have

   var data = serializedGrid[i]; this.resize_widget($widget, data.sizex, data.sizey); 

  however a console.log of data show:

   data.size_x data.size_y 

  not sure how this fits in. The data attribute uses sizex / y but data property from serialize, (on object), it uses size_x / y with underscore.

Answer 2

I think you are looking for media query:

@media all and (max-width: 760px) {
    .gridster .gs-w .item .itemText {
        display: none;
    }
}

Example

Answer 3

You can hide text by using below type of CSS

.gridster .gs-w .item .itemText a.hide-text {
    text-align: left;
    text-indent: -99999px;
    display: inline-block;
}

now whenever you want to hide text you need to add this class ie hide-text on anchor element <a href="#">Objects</a> and vice versa to show text remove class

basically you need to try and figure out best possible solution to fit all requirements Good luck