Berserk Guts Posts - Answer Overflow

Berserk Guts

Posts Comments

KPCKevin Powell - Community

•Created by Berserk Guts on 1/15/2024 in #front-end

Why align-items: stretch, is not working in this case

10 replies

KPCKevin Powell - Community

•Created by Berserk Guts on 4/18/2023 in #front-end

How can I create this layout?

5 replies

KPCKevin Powell - Community

•Created by Berserk Guts on 2/20/2023 in #front-end

How to create a layout where parent height = height of smallest child?

I have a div with display flex which contains 2 children side by side, I want the children to be of same height but the one which is larger should be scrollable. In this sandbox example I want the blue to be the same height as red but should be scrollable. This is just a basic example the real case why I need is because on the left I have a form and on the right I have a list of products and then the list is much larger to avoid scrolling the whole page I want to scroll just the element https://codesandbox.io/s/immutable-pine-bzio8k?file=/index.html

1 replies

KPCKevin Powell - Community

•Created by Berserk Guts on 2/2/2023 in #front-end

How to mix behaviour of bootstrap buttons?

I am want to keep the default bootstrap buttons as they are but on some places I need to customize their behaviour for example I want to have button primary by default but on hover I want it to act like button outline primary, I tried

.my-custom-btn{
 @extend .btn-primary;

&:hover{
 @extend .btn-outline-primary;
}
}

.my-custom-btn{
 @extend .btn-primary;

&:hover{
 @extend .btn-outline-primary;
}
}

But it isn't working because the .btn-primary hover effects are taking over, how can I fix it?

1 replies

KPCKevin Powell - Community

•Created by Berserk Guts on 12/19/2022 in #front-end

Loading css from js causes the content to jump?

I have customized bootstrap 5 and I need to support rtl I am using rtlcss to generate the .rtl.css file which is working but using the <link> to include both css files was causing problems, so I used javascript to detect the dir in html tag and then decided which css file to load using document.head.appendChild(linkElement) where linkElement conttains the path to the .css or .rtl.css file, but this is causing in the beginning the content to jump as if the styles are applying after the page has already loaded how to fix this?

35 replies

KPCKevin Powell - Community

•Created by Berserk Guts on 12/13/2022 in #front-end

RTL not working in bootstrap5

I installed bootstrap with npm install bootstrap and I am trying to customize it so I am importing the bootstrap file from @import '../node_modules/bootstrap/scss/bootstrap'; but when I tried using ms-3 or me-3 and apply the rtl dir in html tag it doesn't swap the rules. Should I do something to enable it? Because I saw using bootstrap via cdn they provide a bootstrap-rtl.min.css but I dont find a rtl file when installing it via npm

6 replies

KPCKevin Powell - Community

•Created by Berserk Guts on 12/13/2022 in #front-end

Customizing bootstrap 5

I added some custom colors in the theme-colors map using the merge function but if I try to use them with .bg- class it doesn't work, how can I make them available?

3 replies

KPCKevin Powell - Community

•Created by Berserk Guts on 12/4/2022 in #front-end

How is facebook achieving this responsiveness?

2 replies

Gaming

Programming