By r-m-n on

http://gruplaela.uji.es/__D8/node/39

On this page I have a field called "Authored by" and the field type is Entity Reference. I'm trying to style it but I cant get it to sit inline like the other fields (which are field type Text). Rather the two field items sit on top of each other and push the following field to the right (as if it were float: left in CSS).

What I would like to have is something like this:

Authored by: Patricia Salazar Victòria Codina

And I can achieve it with:

.field--name-field-researchers .field--item{display:inline;}

However, it still pushes the next field to the right.

Here is the HTML output:

<div data-quickedit-field-id="node/39/field_researchers/en/full" class="field field--name-field-researchers field--type-entity-reference field--label-inline quickedit-field">
    <div class="field--label">Authored by</div>
          <div class="field--items">
              <div class="field--item"><a href="/__D8/taxonomy/term/3" hreflang="en">Patricia Salazar</a></div>
          <div class="field--item"><a href="/__D8/taxonomy/term/4" hreflang="en">Victòria Codina</a></div>
              </div>
      </div>

Is there something specific about Entity Reference that makes it display like this?

Thanks for your time (and sorry for the newbie question!)

⋅ Categories: Drupal 8.x

Comments

ganesh9930’s picture

ganesh9930
Primary language Marathi
Location Mumbai
commented

Hi,

CSS like this :

.field--name-field-researchers .field--label {

float: left;

margin-right: 10px;

&::after {

content: ":";

margin: 5px;

}

}

.field--name-field-researchers .field--items .field--item {

float: left;

margin-right: 9px;

}

Please try above CSS code. 

Thanks

ceosuite’s picture

ceosuite commented

Do try this while using inline CSS. 

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* Add some margins for each label */
.form-inline label {
  margin: 5px 10px 5px 0;
}

/* Style the input fields */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Style the submit button */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}

.form-inline button:hover {
  background-color: royalblue;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }