I'm currently working with Angular 17 and Angular Material 17.3.1, and I'm encountering an issue with styling the Menu component. Specifically, I'm trying to adjust the height of the menu items, but my attempts haven't been successful so far. Link…
I have HTML Like this <element1 class="class__1"> <element2 removePadding></element2> <element3 class="class-3"></element3> </element> I want to change the margin-bottom of class-3 only when element2 has removePadding attribute, I tried like this element1 element2[removePadding] element1 element3.class-3 { margin-top: 20px; } but this…
EDIT: Here's stackblitz for example app EDIT 2: See my answer for simple solution I have a React component that shows an alert component with the scss. export function MyComponent() { return ( <div className={styles.alert}> <ModusAlert message={'Some message'}></ModusAlert> </div> );…
In my file Home.tsx containing components for my Home-page I import a SASS-file like this: import styles from "../styles/Home.module.sass" Home.module.sass #container width: 100% height: 100vh display: block overflow: auto #container > div width: 50% float: left height: 100% display: flex…
I using vanilla javascript + Vite, why styles doesn't work? this point I import style of logo component and this is common style.css @import url("./CORE/Logo/style.scss"); *, body, html { box-sizing: border-box; margin: 0px; padding: 0px; } and this is section…
i am trying to design a movie watchlist but having problems maintaining the design. I am using tmbd api to fetch movie data. Now I want each setion to look like the first one (halo). But in the other two…
I'm using spatialNavigation for focusing the element as below code in index.html <script src="https://cdn.jsdelivr.net/npm/[email protected]/spatial_navigation.min.js"></script> <script> window.addEventListener('load', function () { // Initialize SpatialNavigation.init(); // Define navigable elements (anchors and elements with "focusable" class). SpatialNavigation.add({ selector: '.focusable', straightOnly: true, straightOverlapThreshold: 0.5, rememberSource:…
there is a page that contains information about the author. I'm trying to achieve the following result when scrolling the text: https://streamable.com/4cvcgq (This is a version of the application for iOS (made on Swift), I am making a web analogue).…
default padding of mat-button's, i need to subscribe the default padding (16px) I've been trying to set the padding of a mat-button, but the component's style isn't changing. What can I do, I've already tried changing CSS properties, but none…
I want the nav bar and header to just be at the top of the page but instead it stays on the screen as scrolling. Anytime i try to fix it it just sends the title to the side or…