emmanuelyolou
emmanuelyolou
PostsComments
KPCKevin Powell - Community
Created by john_galt on 7/8/2023 in #front-end
Why second and third flex items doesn't take the remaining height space of container
Don't worry about that, a correction is always welcome 😁 . And you were right, no need to set an height for .half-width-item as it'll stretch by default. For the wrapper tho, you could stick to flex: 1 or height: 100%, i guess it's a matter of personal preferences. Happy that you found a solution 🤝
8 replies
KPCKevin Powell - Community
Created by champagnemami on 7/6/2023 in #front-end
Having trouble setting the height for a sticky component
I'm not really a React dev but since it didn't have any answer, i'll try to help lol🏃 If i understood your issue, you want the job details container to entirely fit in the screen without having to scroll first, right ? I think the issue might be the height of your job details. I don't know how you set the height for your NewJobsCard but your JobDetails should take the same height as two rows (occupied by the Job card) + the gap. If we could see the code for the NewJobsCard it might help. However try it. If the NewJobsCard have a fixed size, then the job details should be twice taller + the gap.
2 replies
KPCKevin Powell - Community
Created by john_galt on 7/8/2023 in #front-end
Why second and third flex items doesn't take the remaining height space of container
Or a faster solution would be to add css align-content: center to the container. Since the space between the items is created because of how the css flex-wrap: wrap works, it'll solve that. The code would be: 
.container {
    /*Add your current css for the container here*/
    align-content: flex-start;
}

.half-width-item {
  flex: 1;
  height: calc(100% - 20px);
}
.container {
    /*Add your current css for the container here*/
    align-content: flex-start;
}

.half-width-item {
  flex: 1;
  height: calc(100% - 20px);
}
For the .half-width-item, the width is 100% of the height of the container minus 20px. It's because the container flex-direction is set to row by default, so the height of its children won't shrink to fit its height. So to prevent the overflow, we substract the 20px of the full-width-item.
8 replies
KPCKevin Powell - Community
Created by john_galt on 7/8/2023 in #front-end
Why second and third flex items doesn't take the remaining height space of container
Because you didn't specify any height for them. The default height here is because the container's "align-items" property has a default set to 'stretch'. If updating your HTML is possible, you could put the 2 last items inside a sort of wrapper and then give a flex-direction: column to your container. Your css would then be: 
.items-wrapper {
  display: flex;
  height: 100%;
}

.half-width-item {
  flex: 1;
  height: 100%;
}

.container {
  border: 5px solid black;
  height: inherit;
  display: flex;
  flex-direction: column;
}
.items-wrapper {
  display: flex;
  height: 100%;
}

.half-width-item {
  flex: 1;
  height: 100%;
}

.container {
  border: 5px solid black;
  height: inherit;
  display: flex;
  flex-direction: column;
}
8 replies
KPCKevin Powell - Community
Created by tiopicles on 7/8/2023 in #front-end
avoid overflow-y: auto when using overflow-x: hidden
I think you could try a width that would fit in your .clinica. Like: .clinica__divider::before { .... width: calc(100% - 18rem); right: 0; }
8 replies