0

I have setup some Structure/Views for items that I am pushing to the front page. I have 2 separate link items (1 displays facebook icon, 1 displays arrow icon) some instances will have both links, some instances will have 1, currently if I leave the facebook link field blank, the display still leaves the space for that item.

It seems related to the font awesome "fas" class that needs to be added to the Views setting in order to load the icons (icons are used in "content:" in css). Once I remove the "fas" class the height of the empty link field removes itself from the page. How do I retain "fas" class on the: View (structures/views/ (item) / link field; but remove the height of empty fields?

code:

<div class="views-field views-field-field-link-special"> 
<div class="field-content readmore fas"> 
<a href="/jjweb/web/node/24" target="_blank">Read More</a> </div></div>
<div class="views-field views-field-field-link-facebook"> 
<div class="field-content readfacebook fas"> </div></div>

The below screenshot shows how the class is applied to the View/Field, with "Hide if Empty" applied.

enter image description here

Improve this question
5
  • Welcome to the drupal stackexchange, this seems more like a css issue but perhaps if you become more specific of what the html output looks on the page someone can help you solve it.
    – GiorgosK
    Dec 17, 2018 at 7:08
  • yes it seems to do with the "fas" class that needs to be added to the Views setting in order to load the fontawesome icons correctly (the icons are being referred to as content n the css). Once I remove the "fas" class the height of the empty link field removes itself from the page.
    – Auxiliary Joel
    Dec 18, 2018 at 1:04
  • See: <div class="field-content readfacebook fas"> that is hidden on page (there is no link used and View is set to hide if empty Field). But "fas" class is still forcing space on the page. If I remove "fas" the space removes from page. How to retain "fas" class,but not the height of empty fields? <div class="views-field views-field-field-link-special"> <div class="field-content readmore fas"> <a href="/jjweb/web/node/24" target="_blank">Read More</a> </div></div><div class="views-field views-field-field-link-facebook"> <div class="field-content readfacebook fas"> </div>
    – Auxiliary Joel
    Dec 18, 2018 at 1:13
  • please add these details in your question and format any code snippet if possible. The more details you give about your problem the more chances someone will pick it up and answer.
    – GiorgosK
    Dec 18, 2018 at 5:11
  • Please add more information, content type setup ? how many fields ? names of fields, views setup ? what views fields are outputted ? Drupal 7 or Drupal 8 ? Don't cram ALL information in your question but make an effort to only show relevant info, (intead of the picture just mentioning No results behaviour with hide if empty checked will probably suffice.
    – GiorgosK
    Dec 18, 2018 at 6:57

1 Answer 1

Reset to default
0

The cleanest solution would be to hide a field that has no content.

Go into the configuration of each field you output on the view and under No results behaviour check hide if empty

enter image description here

Improve this answer
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.