CODEWITHSUNDEEP
htmlcss
st-h
st-h

Reputation: 2553

How can I hide specific elements if they do not fit the container?

given a navigation bar style container, which contains a list of buttons. The buttons contain an svg image as well as some text. The number of buttons may change at runtime and the text might as well due to i18n. This pretty much eliminates the possibility to just solve this with media queries.

big screen:

 ------------------------------------------
| --------------------    ---------------  |
||svg create new page |  | svg edit page | |
| --------------------    ---------------  |
 ------------------------------------------

when the screen gets smaller, an alternative shorter text should be used:

smaller screen:

 -------------------------------
| -----------    ----------     |
||svg create |  | svg edit|     |
| -----------    ----------     | 
 -------------------------------

and finally, when we can't even make this fit, only display the svg icon and no text:

 -------------------
| -----    -----    |
|| svg |  | svg |   |
| -----    -----    | 
 -------------------

I was using media queries to make this work previously, but as the more the buttons might change at runtime, this gets more and more complex and difficult. Is there some better way css would support something like this?

.buttons {
  whitespace: nowrap;
}
<div class="buttons">
  <button>
    <span>svg</span>
    <span class="long">
      create new page
    </span>
    <span class="short">
      create
    </span>
  </button>
    <button>
    <span>svg</span>
    <span class="long">
      edit page
    </span>
    <span class="short">
      edit
    </span>
  </button>
</div>

link to fiddle

Upvotes: 0

Views: 614

Answers (4)

st-h
st-h

Reputation: 2553

The solution to this issue is called container queries. Not yet supported by browsers, but there are a few ways by using javascript to make it work.

There also are a couple of libraries available to take care of the heavy lifting - but that often depends on the framework being used.

Upvotes: 0

Shahryar Mohajer
Shahryar Mohajer

Reputation: 589

use a instead of button and add style to it like a button

<a href="" class="test button"></a>


    @media (min-width: 1440px) and (max-width: 1600px) {

    .test:before {
      content:"hi large text";
        display:block;
    }

  } 


   @media (min-width: 800px) and (max-width: 1200px) {

    .test:before {
      content:"hi medium text";
        display:block;
    }

  } 



    @media only screen and (max-width: 767px) {
           .test:before {
          content:"hi small text";
            display:block;
        }
     }

Upvotes: 1

Roger Kreft
Roger Kreft

Reputation: 200

I know its not exactly what you where asking, but how about the following:

.buttons {
  display: flex;
  flex-flow: row nowrap;
}

button {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

Fiddle: https://jsfiddle.net/cnh3z5jL/

It hides the context starting on the right side of you make the window smaller. Does this work for you?

Edit: You can skip the

   text-overflow: ellipsis;

if that looks better to you

Upvotes: 1

RickJo
RickJo

Reputation: 86

I have two possible solutions:

  1. Use css to target specific screen size eg:

    @media (min-width: 1440px) and (max-width: 1600px) { /* * styles go here */ }

  2. If you're using angular, try using ng-class; it will help you to use conditional classes so you can put something like

    < some-element [ngClass]="{'class1 class2 class3' : true}">...< /some-element>

Also, try using 

.yourClass{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

So it won't overflow. I hope this helps

Upvotes: 1

Related Questions