question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header in mobile view is not shown

See original GitHub issue

I am using this super responsive table with react. I have created a custom table that would be used for the project.

I am using this in a super responsive table and creating a table. Creating Dynamic Header and Dynamic Body. On the Laptop View, the table is working fine but on mobile view, the header is not coming on the display as shown below in the screenshot as it should be.

I have been using this as a column config : export const column config = [ {
coloumnName: “Name”, coloumnType: “regular”, className : "col-md-2 col-12 text-break ", dataColoumn: “name”, color: “#555”, backgroundColor: “white”, fontSize: “10px”, linkTo: “null”, sortExpression: “name” } }

And data from API is in this Form

export const persons = [ { _id:1, name: “Cardio-repository Events and Inflammatory Response After Primary Immunization in Peterm Infants”, type: “Research”, status: “DRAFT”, enrolmentType: “Automatic”, lastUpdated: “23-Jul-2021”, lastUpdatedBy: “Neil”, owners: “John”, tags: [“Immunization”, “Cardio-respiratory”] } ]

My Basic Structure Flow is in this way for a particular Td.

<div class="row">
<div class="mx-auto">
<table data-testid="table" class=" responsiveTable"><thead data-testid="thead">
<tr data-testid="tr">
<th data-testid="th">Name</th>
</tr>
</thead>
<tbody data-testid="tbody">
<tr data-testid="tr">
<td data-testid="td" class=" pivoted">
<div data-testid="td-before" class="tdBefore">

</div>
Cardio-repository Events and Inflammatory Response After Primary Immunization in Peterm Infants
</td>
</tr>
</tbody>
</table>

Expected behavior In Full View it is Fine

image A clear and concise description of what you expected to happen.

Screenshots In Mobile View Header is Missing

image

Desktop (please complete the following information):

  • OS: [e.g. iOS] - Windows 10
  • Browser [e.g. chrome, safari] - Chrome
  • Version [e.g. 22] - Version 96.0.4664.93

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6] - iphone 7
  • OS: [e.g. iOS8.1] - iOS 14
  • Browser [e.g. stock browser, safari] - safari
  • Version [e.g. 22] - 22

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
vivek07542commented, Apr 27, 2022

But the issue has still not been resolved. I have tried every aspect as you said Recompose your table to a simple non-dynamic table. Next, add in the dynamic features. Then, break up your components however you see fit. Do you spot the issue? but it’s showing the same error.

1reaction
CalebBarnescommented, Apr 28, 2022

I also still have the issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Header refuses to show up on mobile view - Stack Overflow
Change your header css to position: absolute . This way the nav moves outside of the header when it gets fixed position. header...
Read more >
header image not showing in mobile device - WordPress.org
Hello Support,. I am not able to see my header image in my mobile or tab. I am able to see in desktop...
Read more >
Topic: Header not displaying on mobile browser (iPhone)
Go to appearance > extras and make sure that “Display a mobile theme when this blog is viewed with a mobile browser” is...
Read more >
Search icon not showing on mobile sticky header - SitePoint
So when I view the site in mobile, and click the search icon of normal header in mobile menu, the search overlay shows...
Read more >
Header not showing up on mobile device. - ThemeFusion
Hi everyone. Fairly new to website building. I'm part way through making my website. On mobile devices, the header doesnt show up at...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found