-1

I have tabular data in a Telerik RadGrid where I'm converting the table cells <TD>'s to display: inline-block so they will "stack" vertically for mobile devices. Works great... except for when one of the items text is longer and is forced to wrap, where the 2nd line is not left-aligned with the first line. I was able to implement text-indent: hanging 45%, but it only resolves the issue for ios devices. Apparently text-indent isn't supported in Android.

I"m using the :before psuedo element to apply content: attr(data-label) representing the column heading. An important note is that the "document name" is a link to download the document. An example is attached.

enter image description here

Is there an equivalent technique to mimic this behavior for non-ios mobile devices?

Jeff King
  • 17
  • 4
  • Can you please add a [minimal reproductible example](https://stackoverflow.com/help/minimal-reproducible-example) ? – Cédric Dec 29 '22 at 14:09
  • That may be difficult, considering it's Telerik, but I'll give it a shot. It's based off this example: https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/grid-stack-responsive-columns-on-small-screens – Jeff King Dec 29 '22 at 14:15
  • The difference between my usage and the above example is that I'm only using one column of data and adding the column header as content in the before pseudo element. – Jeff King Dec 29 '22 at 14:17

1 Answers1

0

I can see 4 options, similar look but with differences from the oldest method to the newest. (excluding float and position) It also doesnt look alike anything you linked about telerik ?

They should all be working, android is not a browser tho :)

options to test:

div {
  width: 300px;
  margin: 1em;
  border: solid;
  background: wheat;
  vertical-align: top;
}

div:before {
  content: attr(data-label);
  width: 120px;
  background: yellow
}


div[data-label="inline-table:"] {
  display: inline-table;
}

div[data-label="inline-table:"]:before {
  display: table-cell;
}


div[data-label="Column CSS:"] {
  display: inline-block;
  column-count: 2;
}

div[data-label="Column CSS:"]::before {
  display: block;
  min-height: 2.2em;
}

div[data-label="inline-flex:"] {
  display: inline-flex;
}

div[data-label="inline-flex:"]:before {
  display: table-cell;
}

div[data-label="inline-grid:"] {
  display: inline-grid;
  grid-template-columns: 1fr 1fr
}

div[data-label="inline-grid:"]:before {}
<div data-label="inline-table:">This is the name of the document</div>
<div data-label="Column CSS:">This is the name of the document</div>
<div data-label="inline-flex:">This is the name of the document</div>
<div data-label="inline-grid:">This is the name of the document</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Appreciate the input and will see what I can glean from it. I do know that Android is not a browser and should've clarified that I meant browsers on an Android device. – Jeff King Dec 29 '22 at 15:30
  • Unfortunately, I do not have the luxury of changing the architecture. We only have a few Android users and wholesale redesign for them is not an option. – Jeff King Dec 29 '22 at 15:52
  • 1
    @JeffKing well for the architecture, it is from what we guessed _ *I"m using the :before psuedo element to apply content: attr(data-label) representing the column heading.* nothing more or less. If the code used to demonstrate the idea does not reflect yours, you should share your HTML structure ;) if td are defaut display:table-cell any other display will reset that default beahvior at screen. My answers is actually closer to a comment than an answer, but too long to be a comment for the demos that it brings along :) – G-Cyrillus Dec 30 '22 at 20:11
  • Thanks for the clarification. I'm using Telerik controls (RadGrid, etc.) which ends up producing Tables in the HTML sent to the browser. In order to achieve any of your recommendations, I would need to change up the aspx page containing the Telerik controls. It's important to retain how it renders on a desktop/full-size version. With fresh eyes this week, I am going to see if I can incorporate some elements of your solution. – Jeff King Jan 03 '23 at 12:25