How can I hide or show a bootstrap modal in my web page? Problem Description: I’m new at web programming and trying to figure out modal structure. The point is , my modal is always open even if I refresh the page. I want it to be activated after user clicks a submitting button. Sory … Read more
How to use :hover to scale overlap images? Problem Description: I am trying to make a hover effect so when any of the images have the mouse hovering over, the shirt scales to zero and the art scales up. Unfortunately I can’t get this figure out I am very new to this This is what … Read more
How to use :hover to scale overlap images? Problem Description: I am trying to make a hover effect so when any of the images have the mouse hovering over, the shirt scales to zero and the art scales up. Unfortunately I can’t get this figure out I am very new to this This is what … Read more
Apply css to all elements other than first using ngfor Problem Description: I want to apply CSS to all elements except the first Below is my code and the screenshot of how I want and how I am currently getting –Current –Expected Code <div class="row"> <div class="cell col-md-4">Fann dial readings:</div> <div class="cell value caption-bold col-md-2 … Read more
Can't drag element, by clicking on the slotted text (Vanilla JS) Problem Description: I created a draggable Web-Component with a slot: const DragItemTemplate = document.createElement(“template”); DragItemTemplate.innerHTML = `<style>` + `div{` + `background: gray;` + `width: 200px;` + `height: 50px;` + `padding: 5px;` + `margin: 5px;` + `cursor: move;` + `display: flex;` + `align-items: center;` + … Read more
How to get equal vertical spacing after a spanner in a CSS multi-column layout? Problem Description: As a minimal example, this CodePen contains a div element with two columns of text. This div, in turn, contains a h2 element spanning both columns (i.e. a spanner, see e.g. MDN). The vertical space following it is clearly … Read more
Icon and links on the same line in mobile view with Tailwind CSS? Problem Description: I am trying to get the icons on the left side of the links. But in mobile view one or more icons shows on wrong line instead of beside the link. What should I do? Tailwind CSS or CSS might … Read more
Flexbox inside table column using white-space: nowrap Problem Description: My white-space nowrap text inside a flexbox container is overflowing the page as far as it goes. I seem to have hit a weird edge- case in CSS layout. I have a table, and inside one column I have a flex container with two columns. The … Read more
How do you convert two classnames together into styled-components? Problem Description: I’m trying to convert my css to styled-components ` .background{ width: 430px; height: 520px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; } .background .shape{ height: 200px; width: 200px; position: absolute; border-radius: 50%; } .shape:first-child{ background: linear-gradient( #1845ad, #23a2f6 ); left: -80px; top: -80px; … Read more
html tag displayed in browser instead rendering it Problem Description: I am using this https://codepen.io/toschivictor/pen/JjNZjEj I need to replace icons with images, so I replaced these icons const items = [ ‘🍭’, ‘❌’, ‘⛄️’, ‘🦄’, ‘🍌’, ‘💩’, ‘👻’, ‘😻’, ‘💵’, ‘🤡’, ‘🦖’, ‘🍎’, ‘😂’, ‘🖕’, ]; with below code, const items = [ ‘<img src="image.jpg">’, … Read more