Uønsket linjeskift ved bred label og tooltip

[sondre-bjerkerud-sb1u]

Opplever at tolltipen til InputGroup blir plassert på linjen under når den totale bredden av label + tooltip > container. Siden label og tooltip ikke har en container rundt seg som kan stiles blir det vanskelig å kontrollere wrapping.

Mulig dette kan løses vha. CSS på en måte jeg ikke kjenner til. Tar i så fall mot forslag med takk.

Finner bredden der linjeskiftet inntreffer og benytter følgende for å oppnå ønsket brytning:

.invoiceCustomerNumber {
  label {
    @media (max-width: 322px) {
      max-width: 150px;
    }
  }

   // Annen styling
}

Får ønsket wrapping for labelen, men tooltipen havner høyere over inputfeltet enn for andre inputfelter med tooltip slik at designet ikke blir konsistent:

Teknisk sett føles dette ut som en hack.

[pethel]

Tusen takk før att du tok deg tid att melde in denn. Den media query løsningen du viser før brytning må vell fungera på bokmål, nynorsk og engelsk(troligen olika bredder på texten)? Også olika text-zoom vil nok vare en utfordring med den samme løsningen.

Jag er ikke sikker på att designsystemet burde gjøra noe med dette. Vi vurderer saken. Mulig løsning på problement ditt er bruk av css grid. Jag burde nok egentligen ikke oppfodra till dette men er vell greit og resonera litt iaf :)

.ffe-input-group {
   display: grid;
   grid-template-columns: 1fr auto; 
}

.labelklassen { 
    grid-column-start: 1;
      grid-column-end: 2;
}


.tooltipklassen { 
    grid-column-start: 2;
     grid-column-end: 3;
     align-self: end;
}


.inputklassen { 
    grid-column-start: 1;
     grid-column-end: 3;
}

[pethel]

Slik opfører seg https://design.sparebank1.no/ så jag tenker att dette er forvenet oppførsel?

[sondre-bjerkerud-sb1u]

Takk for løsningsforslag. Vi har design slik som fremkommer av mine snippets, så en overgang til å benytte description i stedet for tooltip er dessverre ikke en løsning.