Av003 Comments - Answer Overflow

Thanks for the help , I solved it , I was using trial and error method and removed all grid area code and instead used the old fashioned way by using grid column and grid rows , also for the sidebar i removed extra height and set it to 100 vh and flex - grow 1 , it worked

21 replies

KPCKevin Powell - Community

•Created by Av003 on 9/1/2024 in #front-end

does anyone know CSS grid well?

Should I share that on codepen

21 replies

KPCKevin Powell - Community

•Created by Av003 on 9/1/2024 in #front-end

does anyone know CSS grid well?

I don't mind sharing the complete css , but can't share the react code

21 replies

KPCKevin Powell - Community

•Created by Av003 on 9/1/2024 in #front-end

does anyone know CSS grid well?

.dashboard {
  display: grid;
  grid-template-areas:
    "navbar navbar navbar navbar"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnostic-list diagnostic-list lab-results";
  grid-template-columns: 320px 1fr 1fr 300px;
  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  grid-template-rows: 70px auto auto 1fr;
  /*changed 3rd element to auto from 1 fr */
  gap: 10px;
  /* height: 100vh; */
  padding: 10px;
  margin-bottom: 1em;
  width: 98%;
  margin: 0 auto;
}

.dashboard {
  display: grid;
  grid-template-areas:
    "navbar navbar navbar navbar"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnosis-history diagnosis-history patient-info"
    "sidebar diagnostic-list diagnostic-list lab-results";
  grid-template-columns: 320px 1fr 1fr 300px;
  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  grid-template-rows: 70px auto auto 1fr;
  /*changed 3rd element to auto from 1 fr */
  gap: 10px;
  /* height: 100vh; */
  padding: 10px;
  margin-bottom: 1em;
  width: 98%;
  margin: 0 auto;
}

21 replies

KPCKevin Powell - Community

•Created by Av003 on 9/1/2024 in #front-end

does anyone know CSS grid well?

☝🏻

21 replies

KPCKevin Powell - Community

•Created by Av003 on 9/1/2024 in #front-end

does anyone know CSS grid well?

It is not similar I have increased the sidebar height to 150vh and I do t want to do that, plus there is an extra space in diagnosis history , I don't want that , third look at the last column how above lab results patient info's height is a little bigger than lab results, I want that

21 replies

KPCKevin Powell - Community

•Created by Av003 on 11/1/2023 in #front-end

Can't get rid of space on right!

This is the best community I came across ❤️!

9 replies

KPCKevin Powell - Community

•Created by Av003 on 11/1/2023 in #front-end

Can't get rid of space on right!

Thanks @MarkBoots ❤️, it worked I removed the max-width line

9 replies

KPCKevin Powell - Community